Su Stack Overflow si trovano spesso domande interessanti, come quella di Lucas Clemente che chiede come poter selezionare due elementi adiacenti ad un dato elemento con i soli CSS. Vediamo insieme le varie possibilità.
La struttura HTML è la seguente:
...
<li>...</li>
<li>...</li>
<li class="last">...</li>
<li class="selected">...</li>
<li>...</li>
<li class="last">...</li>
<li>...</li>
<li>...</li>
<li class="last">...</li>
....
La domanda è questa:
Is there a way with pure CSS to select the li with the
selectedclass and the next two ones, marked in the above code? I've managed to select the next one usingli.selected + li, but this doesn't work for the one after that.
E la soluzione proposta sul sito è la seguente:
li.selected,
li.selected + li,
li.selected + li + li {}
In realtà questa soluzione non risolve il problema sulla lunga distanza, perchè basta aggiungere un altro elemento o altri elementi successivi a quello selezionato per avere una catena di selettori sempre più lunga.
Questo è un caso in cui andrebbero usati i selettori di jQuery, perchè al momento i CSS non dispongono di selettori adeguati (ossia, non esiste un selettore nth-sibling):
$('li.selected').nextUntil('li.last')
In questo caso possiamo sfruttare gli intervalli fra i selettori creati dalla classe CSS last.