:nth-child Zwischen zwei festen Indizes

Ich musste neulich einige Elemente zwischen zwei festen Indizes auswählen – buchstäblich das zweite bis fünfte Element. Ironischerweise habe ich einen ganzen Beitrag über „Nützliche :nth-child-Rezepte“, aber dies war keines davon.

Die Antwort ist, wie sich herausstellt, nicht so kompliziert. Aber es hat meinen Verstand ein wenig verdreht.

Sagen wir, Sie möchten alle divs ab dem zweiten und darüber hinaus auswählen

div:nth-child(n + 2) {

}
/* [ ]  [x]  [x]  [x]  [x]  [x]  [x]  [x], etc. */

Das ergibt für mich logisch Sinn. Wenn n 0 ist, ist der Ausdruck 2, und n erhöht sich von dort aufwärts und wählt alles darüber hinaus aus.

Aber wie „stoppt“ man dann die Auswahl bei einem bestimmten Index? Wie...

/* Not real */
div:nth-child(minmax(2, 5)) {

}
/* [ ]  [x]  [x]  [x]  [x]  [x]  [ ]  [ ], etc. */

Nun, wir können das Gegenteil tun, nur die erste Gruppe von Elementen auswählen und dann stoppen (in die andere Richtung einschränken), indem wir den Wert von n umkehren.

div:nth-child(-n + 6) {

}
/* [x]  [x]  [x]  [x]  [x]  [ ]  [ ]  [ ], etc. */

Das wählt die ersten fünf Elemente aus und stoppt dann, weil der Ausdruckswert mit zunehmendem n zu 0 und in negative Zahlen geht.

Der CSS-Trick hier ist also, beide dieser :nth-child-Ausdrücke zu kombinieren.

Wir wissen, dass CSS-Pseudo-Selektoren additiv sind, in dem Sinne, dass sie beide wahr sein müssen, um sie auszuwählen.

a:first-child:hover {
  /* selects the <a> if it is BOTH the first child and in a hover state */
}

Um die Idee von „2 und darüber“ und „5 und darunter“ zu erreichen, verketten wir die Pseudo-Selektoren

div:nth-child(n + 2):nth-child(-n + 6) {
  background: green;
}

Das wird reichen

Der Teil, der meinen Verstand verdreht hat, war das Nachdenken über „additive“ Pseudo-Selektoren. Ich dachte, dass die Auswahl von „2 und aufwärts“ genau das tun würde, und „5 und abwärts“ genau das tun würde, und dass diese kombinierten Dinge „alle Elemente“ bedeuten. Aber das ist einfach falsches Denken. Es sind die Bedingungen, die additiv sind, was bedeutet, dass jedes Element beide Bedingungen erfüllen muss.

Wenn Sie dies verwirrend fanden, wie ich, warten Sie, bis Sie sich Quantity Queries ansehen. Durch das Verschachteln vieler nth-ähnlicher Pseudo-Selektoren können Sie Logik aufbauen, die beispielsweise Elemente nur dann auswählt, je nachdem, wie viele davon im DOM vorhanden sind.

div:nth-last-child(n+2):nth-last-child(-n+5):first-child, 
div:nth-last-child(n+2):nth-last-child(-n+5):first-child ~ div {
  /* Only select if there are at least 2 and at most 5 */
}

Una hat das vor einiger Zeit noch weiter aufgeschlüsselt.