CSS select the following two elements

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 there are groups of three li s, the last with a certain class and in one of the groups the first li with a special class.

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

I managed to select the next one using li.selected + li , but after that it will not work.

Answer 1

Just add another + li to find it:

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