How do I select the first adjacent sibling?

Question

I have an HTML list like so:

<ul>   <li class="heading">Heading 1</li>   <li class="heading">Heading 2</li>   <li>Text Under Heading 2</li> </ul> 

Since Heading 1 has no text under it, I want to hide it with CSS.

If I do this,

li.heading + li.heading { display: none; } 

it hides Heading 2 instead of Heading 1.

How can I hide Heading 1? Is there a way to look for adjacent siblings and select the first one?

Answer 1

It is possible to target first sibling with CSS, with some limitations.

For the example in the question it could be done with something like this

li.heading { display: none; }                   /* apply to all elements */ li.heading + li.heading { display: list-item }  /* override for all but first sibling */ 

This works, but requires that you can explicitly set the styles on the siblings to override the setting for first child.

Answer 2

It is not possible using CSS as currently defined and implemented. It would require a selector that selects an element on the basis of its siblings after it. CSS selectors can select an element on the basis of preceeding or outer elements, but not on the basis of following or inner elements.

The desired effect can be achieved using JavaScript in a rather straightforward way, and you can decide, depending on the purpose, whether you just remove the elements from display or completely remove them from the document tree.