Alan Jenshen Alan Jenshen - 5 months ago 21
CSS Question

Use css to ensure only one block is shown

{this.state.company && <p class="abc">abc</p>}
{this.state.company2 && <p class="abc">abc</p>}


I have 2 tag in my template engine, sometime one will appear sometime both will appear, but for user he should always see one. How can I use css to display only one item?

if I do

p:last-child {
display:none
}


but when the result is only one present, that will not work.

Answer Source

You can only hide them, if they are not the first child:

p:not(:first-child) {
   display:none;
}