Question

I have the following HTML:

...
<li>...</li>
<li>...</li>
<li class="last">...</li>

<li class="selected">...</li>  # <- this
<li>...</li>                   # <- this
<li class="last">...</li>      # <- this

<li>...</li>
<li>...</li>
<li class="last">...</li>
....

So, basically groups of three lis, the last one with a specific class and in one of the groups the first li with a special class.

Is there a way with pure CSS to select the li with the selected class and the next two ones, marked in the above code?

I’ve managed to select the next one using li.selected + li, but this doesn’t work for the one after that.

Answer 1

Simply add another + li to reach it:

li.selected, li.selected + li, li.selected + li + li