CSS :nth-of-type() 伪类

定义和用法

CSS :nth-of-type(n) Pseudo-Klassen werden verwendet, um Elemente zu matchen, die als das nth Kind ihres Elternelements desselben Typs (Tagname) sind n jedes Kindselement eines Elements sein.

n kann eine Zahl/Indiz, ein Schlüsselwort (ungerade oder gerade) oder einer Formel (wie an + b)

Hinweis:Ansehen :nth-child() Pseudo-Klassen dienen dazu, Elemente zu wählen, die als das nth Kind ihres Elternelements sind n jedes Kindselement eines Elements, unabhängig von seinem Typ.

Beispiel

Beispiel 1

Wie man es verwendet :nth-of-type() Selektor:

/* Wählen Sie das zweite Element in den Brüdern von div */
div:nth-of-type(2) {
  background: red;
}
/* Wählen Sie das zweite li-Element in der Liste */
li:nth-of-type(2) {
  background: hellgrün;
}
/* Wählen Sie jeden dritten Element in jeder Gruppe von Brüdern */
:nth-of-type(3) {
  background: gelb;
}

Versuchen Sie es selbst

Beispiel 2

ungerade und gerade ist ein Schlüsselwort, das verwendet werden kann, um Elemente mit ungerader oder gerader Indexnummer zu matchen (der Index des ersten Kindes ist 1).

Hier weisen wir der Hintergrundfarbe für <p>-Elemente mit ungerader und gerader Indexnummer unterschiedlich zu:

p:nth-of-type(ungerade) {
  background: red;
}
p:nth-of-type(gerade) {
  background: blue;
}

Versuchen Sie es selbst

Beispiel 3

Verwenden Sie die Formel (an + b) Beschreibung:a Stellt einen ganzzahligen Schritt dar, n sind alle nichtnegativen Ganzzahlen, beginnend mit 0,b ist ein ganzzahliger Abstand.

Hier weisen wir der Hintergrundfarbe für alle <p>-Elemente zu, deren Index ein Vielfaches von 3 ist (wählen den dritten, sechsten, neunten usw. Element):

p:nth-of-type(3n+0) {
  background: red;
}

Versuchen Sie es selbst

Beispiel 4

Hier weisen wir der Hintergrundfarbe für alle <p>-Elemente zu, deren Index ein Vielfaches von 3 ist. Dann subtrahieren wir 1 (wählen den zweiten, fünften, achten usw. Element):

p:nth-of-type(3n-1) {
  background: red;
}

Versuchen Sie es selbst

CSS-Syntax

:nth-of-type(index | ungerade | gerade | an+b) {
  css-Anweisungen;
}

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die diesen Pseudo-Klassen vollständig unterstützt.