CODEWITHSUNDEEP
csscss-selectors
Tomáš Zato
Tomáš Zato

Reputation: 53129

Can I use CSS to apply styles based on child element count?

I have a situation where n elements can be present and any can be deleted. But at the point where only one element is present, the deletion should be disabled (ideally by setting display:none):

three items with deletion button

And only one item:

one item and no deletion button

My question is if I can do something like this:

DIV.items:ONLY_ONE_CHILD DIV.item BUTTON.delete {
   display:none;
}

No is an acceptable answer but in that case I'd like to know about the closest possibility or potentional future options.

Upvotes: 1

Views: 1448

Answers (1)

BoltClock
BoltClock

Reputation: 723538

You can't specify it on the parent (DIV.items), but you can on the child (DIV.item) with the :only-child pseudo-class. Since you're styling a descendant of the child here, what you're looking to do is in fact possible:

DIV.item:only-child BUTTON.delete {
    display: none;
}

Upvotes: 1

Related Questions