Wählen Sie jedes N-te Element in CSS aus

242

Ist es möglich, beispielsweise jedes vierte Element in einer Reihe von Elementen auszuwählen?

Bsp.: Ich habe 16 <div>Elemente ... Ich könnte so etwas schreiben.

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

Gibt es einen besseren Weg, dies zu tun?

css css-selectors Derek Adair
quelle
1
Hoffe, jeder ist noch am Leben, nur für Neulinge und nicht so Neulinge, wählen Sie sogar eine Menge alle n Elemente und kniffligere Dinge: nthmaster.com
gengns

Antworten:

419

Wie der Name schon sagt, können Sie mit der Variablen zusätzlich zu konstanten Zahlen einen arithmetischen Ausdruck erstellen. Sie können Addition ( ), Subtraktion ( ) und Koeffizientenmultiplikation durchführen ( wobei es sich um eine Ganzzahl handelt, einschließlich positiver Zahlen, negativer Zahlen und Null).:nth-child()n+-ana

So würden Sie die obige Auswahlliste neu schreiben:

div:nth-child(4n)

Eine Erklärung zur Funktionsweise dieser arithmetischen Ausdrücke finden Sie in meiner Antwort auf diese Frage sowie in der Spezifikation .

Beachten Sie, dass bei dieser Antwort davon ausgegangen wird, dass alle untergeordneten Elemente innerhalb desselben übergeordneten Elements vom gleichen Elementtyp sind div. Wenn Sie andere Elemente unterschiedlichen Typs wie h1oder haben p, müssen Sie :nth-of-type()stattdessen verwenden, :nth-child()um sicherzustellen, dass Sie nur divElemente zählen :

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

Für alles andere (Klassen, Attribute oder eine beliebige Kombination davon), bei dem Sie nach dem n-ten Kind suchen, das einem beliebigen Selektor entspricht, können Sie dies nicht mit einem reinen CSS-Selektor tun. Siehe meine Antwort auf diese Frage .

Übrigens gibt es keinen großen Unterschied zwischen 4n und 4n + 4 in Bezug auf :nth-child(). Wenn Sie die nVariable verwenden, beginnt sie bei 0 zu zählen. Dies ist, was jeder Selektor entsprechen würde:

:nth-child(4n)

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n+4)

4(0) + 4 = 0  + 4 = 4
4(1) + 4 = 4  + 4 = 8
4(2) + 4 = 8  + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...

Wie Sie sehen können, stimmen beide Selektoren mit den gleichen Elementen wie oben überein. In diesem Fall gibt es keinen Unterschied.

BoltClock
quelle
Ich dachte nur, ich würde hinzufügen, wenn Sie etwas wie nur das vierte tun, dann würden Sie etwas wie brauchen tr td:nth-child(4). Beachten Sie das Fehlen von n in Klammern
WORMSS
2
Bitte beachten Sie: Dies funktioniert nur auf Element-Selektoren (div, td, img usw.), nicht auf Klassen-Selektoren wie .this
Sliq
1
Ich habe eine interaktive Demo erstellt, um visuell zu erklären, wie nth -child (n) funktioniert: xengravity.com/demo/nth-child . Ich fand die w3-Spezifikation für Anfänger, die Syntax zulassen, besonders entmutigend. speziell ihre "Lexical Scanner" Abschnitt.
Xengravity
1
@ xengravity: Danke fürs Teilen! Ich stimme zu, die Grammatik ist nicht anfängerfreundlich, da sie für Implementierer und nicht für Autoren geschrieben wurde. Die Spezifikation enthält eine Reihe von Beispielen zum Schreiben der Syntax, jedoch ohne zugehörige Grafiken.
BoltClock
1
Ich habe ein ähnliches Tool zum Spielen mit n-ten Kinderausdrücken erstellt
Salman A
12

Versuche dies

div:nth-child(4n+4)
Marko
quelle
10

Sie benötigen das richtige Argument für die nth-childPseudoklasse.

  • Das Argument sollte in der Form vorliegen an + b, dass jedes a- te Kind ab b übereinstimmt .

  • Beide aund bsind optionale Ganzzahlen und beide können Null oder negativ sein.

    • Wenn anull ist, dann gibt es keine „jedes a te Kind“ Klausel.
    • Wenn anegativ, erfolgt der Abgleich rückwärts ab b.
    • Wenn bNull oder Negativ ist, ist es möglich, einen äquivalenten Ausdruck mit Positiv zu schreiben, bz . B. 4n+0ist dasselbe wie 4n+4. Ebenso 4n-1ist das gleiche wie 4n+3.

Beispiele:

Wählen Sie jedes 4. Kind aus (4, 8, 12, ...)

li:nth-child(4n) {
  background: yellow;
}
<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>
Erweitern Sie das Snippet

Wählen Sie jedes 4. Kind ab 1 (1, 5, 9, ...) aus.

Code-Snippet anzeigen

Wählen Sie jedes 3. und 4. Kind aus 4er-Gruppen aus (3 und 4, 7 und 8, 11 und 12, ...)

Code-Snippet anzeigen

Wählen Sie die ersten 4 Elemente aus (4, 3, 2, 1).

Code-Snippet anzeigen

Salman A.
quelle