Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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?
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.