La combinazione di selettori semplici in questo modo significa semplicemente che stai cercando elementi che soddisfino contemporaneamente tutte le condizioni date. La combinazione di pseudo-classi non è diversa dalla combinazione di altri tipi di selettore semplice, ad esempio div.example o input[type="checkbox"]:checked.
Così :nth-child(n+4):nth-child(-n+8) appena si intende qualsiasi elemento che è sia:nth-child(n+4) e :nth-child(-n+8). Questo può essere solo un sottoinsieme delle corrispondenze di entrambi i selettori se usato da solo.
Ed è così che ottieni una serie di elementi.
Come si fa a sapere quali elementi saranno abbinati? Semplice: guardare la B in ogni Un'espressione + B:
:nth-child(n+4) partite i bambini a partire dal 4 ° (compreso):nth-child(-n+8) partite i bambini fino al 8 °
come tutto questo le opere sono già illustrate nel sito Web a cui ci si collega, ma gli esempi precedenti utilizzano :nth-child(n+6) e :nth-child(-n+9) separatamente, il che potrebbe creare un po 'di confusione. Ecco un esempio più coerente per illustrare come i due selettori si combinano (ignorano i bit ::before/::after/content nel CSS - basta concentrarsi sull'uscita):
li::before {
content: 'li';
}
li:nth-child(n+4)::before {
content: 'li:nth-child(n+4)';
}
li:nth-child(-n+8)::after {
content: ':nth-child(-n+8)';
}
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>