Recently on Stack, I came across a question that was answered correctly.
The query was about how to target the first two li elements after each occurrence of .class1.
<ul>
<li>Something</li>
<li class="class1">Important</li>
<li>I want this</li>
<li>I want this</li>
<li class="class1">Important</li>
<li>I want this</li>
<li>I want this</li>
<li>Something</li>
<li>Something</li>
</ul>
The correct and accepted answer provided was:
.class1 + li will select the first subsequent sibling.
.class1 + * + li will select the second.
For decreased specificity, you can also try:
.class1 + *,
.class1 + * + * {...}
I experimented with this further and noticed why this doesn't work:
li.class1 li:nth-child(-n+2) {color:red;}
However, it does work when coded like this:
li:nth-child(-n+2) {color:red;}