luqo33 luqo33 - 1 month ago 12
CSS Question

Target all adjacent siblings of an element in a nested list with CSS

This is simplified markup that I have on my site:

<div id="block">
<ol>
<li> <--
<ol>
<li>
...
</li>
</ol>
</li> <--
</ol>
<ol>
<li> <--
<ol>
<li>
...
</li>
</ol>
</li> <--
</ol>
</div>


I want to target only the first level
li
elements in each each top-level
ol
(I mark them with arrows).

How should I write my selectors to target these elements?

Answer

Use a child combinator to target children only

#block > ol > li { … }

This automatically excludes descendant li elements.

Comments