Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS select next two elements

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.

like image 335
lucas clemente Avatar asked Feb 20 '12 14:02

lucas clemente


1 Answers

Simply add another + li to reach it:

li.selected, li.selected + li, li.selected + li + li
like image 182
BoltClock Avatar answered Sep 22 '22 06:09

BoltClock