CSS/Tutorials/Selektoren/strukturelle Pseudoklassen
Bei Pseudoklassen handelt es sich um einfache Selektoren, die ein Element dann ansprechen, wenn es eine bestimmte Eigenschaft besitzt. So lassen sich zum Beispiel Elemente auswählen, die das erste Kindelement eines anderen Elementes sind.
Strukturelle Pseudoklassen sind dafür gedacht, Elemente aufgrund ihrer Position im DOM zu selektieren.
Kindelemente
Kindelemente eines Typs
Inhaltsverzeichnis
root
Mithilfe des Selektors :root ist es möglich, die Wurzel eines Dokumentes anzusprechen. In HTML-Dokumenten ist dies immer <html>. Deshalb ist :root {foo: bar;} dasselbe wie html {foo: bar} allerdings mit höherer Spezifität.
Von Selektoren mit gleicher Spezifität überschreibt normalerweise der letztaufgeführte Selektor die Einstellungen des vorhergehenden. Deshalb würde man eine blaue Schrift erwarten. In Browsern, die :root korrekt interpretieren, ist die Schrift des Dokumentes jedoch rot.
Selektoren für Kindelemente
Diese Selektoren treffen auf alle Kindelemente zu. Im Gegensatz dazu werden mit :…-of-type nur bestimmte Kindelemente selektiert. Der Unterschied ist anschaulich etwa der zwischen erstem Kind und erster Tochter.
first-child
Mithilfe des Selektors :first-child ist es möglich, erste Kindelemente auszuwählen.
:first-child {
border: medium solid blue;
}
li:first-child {
background-color: skyblue;
}
In diesem Beispiel erhält die Überschrift erster Ordnung einen blauen Rahmen, weil sie das erste Kindelement des Elementes „body“ ist. Ebenso erhält das erste Listenelement einen blauen Rahmen, weil es das erste Kindelement der ungeordneten Liste ist.
Mit li:first-child {...} kann gezielt das erste Kind einer Liste selektiert werden.
h2:first-child könnte hier kein Element selektieren, weil es keine Überschrift zweiter Ordnung gibt, die das erste Kind ihres Elternelements ist. Dafür wäre dann first-of-type zu verwenden.last-child
Der Selektor :last-child kann verwendet werden, um das letzte Kind eines Elternelementes zu selektieren.
:last-child {
border: medium solid purple;
}
li:last-child {
background-color: pink;
}
strong:last-child {
border: none;
color:purple;
}
In diesem Beispiel erhält der 3. Absatz einen lila Rahmen, weil er das letzte Kindelement des Elementes „body“ ist. Ebenso erhält das dritte Listenelement einen lila Rahmen, weil es das letzte Kindelement der ungeordneten Liste ist. Auch auf „body“ selbst als letztes Kind des html-Elements trifft der Selektor zu.
Mit li:last-child {...} kann gezielt das letzte Kind einer Liste selektiert werden.
Auch strong:last-child {...} findet ein letztes Kind, da der folgende Text Plain text ist.
nth-child
Mithilfe des Selektors :nth-child() ist es möglich, das n-te Kind eines Elternelementes zu selektieren. Der Selektor erwartet als Argument einen mathematischen Ausdruck, der einer arithmetischen Zahlenfolge mit ganzzahligen Koeffizienten entspricht.
Syntax
-
:nth-child(An+B)selektiert all diejenigen Kindelemente, deren „Platznummer“ bei Division durch A den Rest B lässt. Die Platznummern beginnen bei 1. -
:nth-child(odd)ist identisch zu:nth-child(2n+1)und:nth-child(2n-1)(ungerade Platznummer). -
:nth-child(even)ist identisch zu:nth-child(2n)(gerade Platznummer). -
:nth-child(B)selektiert nur das B-te Kindelement. -
:nth-child(n)selektiert alle Kindelemente. -
:nth-child(… of selector)verwendet einen zusätzlichen Filterselektor und wird im nächsten Abschnitt beschrieben.
Sie können für A oder B auch einen negativen Wert angeben. Ein negatives a bedeutet, dass die Zählung der Kindelemente ab Position B rückwärts läuft. :nth-child(-n+5) würde die ersten 5 Kindelemente auswählen. Ein negatives B zu verwenden ist eigentlich unnötig, weil sich beispielsweise 4n-1 genauso gut als 4n+3 ausdrücken lässt. Es drückt nur deutlicher aus, dass es Ihnen um den vorletzten Eintrag geht, nicht den dritten.
Tabelle im Zebralook
table {width: 95%;}
th {
background-color: #666;
color: #fff;
}
tr {
background-color: #fffbf0;
color: #000;
}
tr:nth-child(odd) {
background-color: #e4ebf2;
}
<table>
<tbody>
<tr><th>Zeile</th><th>Inhalt</th></tr>
<tr><td>7</td><td>Text</td></tr>
<tr><td>6</td><td>Text</td></tr>
<tr><td>5</td><td>Text</td></tr>
<tr><td>4</td><td>Text</td></tr>
<tr><td>3</td><td>Text</td></tr>
<tr><td>2</td><td>Text</td></tr>
<tr><td>1</td><td>Text</td></tr>
<tr><td>0</td><td>Text</td></tr>
</tbody>
</table>
Zunächst werden alle Zeilen mit background:#fffbf0; eingefärbt. Dann wird jede zweite Zeile mit
tr:nth-child(odd) {
background-color: #e4ebf2 ;
}
anders eingefärbt.Vorteil: Die Einfärbung wird erst im CSS festgelegt. Wenn eine weitere Zeile im HTML eingefügt wird, sind keine weiteren Änderungen am CSS nötig.
Feld mit Schachbrettmuster
<table>
<tbody>
<tr><th>8</th><td></td>...<td></td></tr>
...
<tr><th>1</th><td></td><td>...<td></td></tr>
<tr><th></th><th>A</th>...<th>H</th></tr>
</tbody>
</table>
In diesem Beispiel wird ein Schachbrett dargestellt. Neben den 8x8 Feldern, die durch normale Tabellenzellen dargestellt werden, erhält es mit th-Elementen noch Bezeichnungen für Spalten (A-H) und Reihen (1-8).
Zunächst werden in den ungeraden Tabellenzeilen alle ungeraden Tabellenfelder mit einem schwarzen Hintergrund versehen. Deshalb ist z.B. das Feld B8 schwarz gefärbt, denn es ist das dritte Kind der Tabellenzeile.
Anschließend werden in den geraden Tabellenzeilen die geraden Tabellenfelder eingefärbt. A7 z.B. ist schwarz, denn dieses td-Element ist das zweite Kind der Zeile.
Siehe auch das Beispiel für die Pseudoklasse nth-of-type().
Information: Schachbretter mit HTML und CSS
Das oben gezeigte Beispiel hat keinen praktischen Nutzen. Für ein Schachspiel wäre es wichtig, die Reihen und Spalten (mit Klassen oder über den nth-of-type-Selektor klar identifizieren zu können.
Im SELF-Forum gab es die Idee ein CSS-Schachbrett mit Grid Layout umzusetzen, das weniger Elemente benötigen würde. Auch wenn man bei einer reinen div-Lösung die tr-Elemente sparen würde, wäre die CSS-Formel für die unterschiedliche Färbung der Reihen viel aufwendiger.
Die Kennzeichnung der Spalten und Reihen könnte mit Pseudoelementen durchgeführt werden.
Als radikalste Lösung könnte man nur ein Element für das Brett an sich verwenden und es mit sich überlagernden repeating-linear-gradient()-Hintergründen oder dem SVG-pattern-Element füllen.
--Matthias Scharwies (Diskussion) 09:52, 5. Aug. 2019 (CEST)nth-child of selector
Die Pseudoklasse :nth-child(An+B) besitzt eine erweiterte Form :nth-child(An+B of S), in der Sie außer der Formel zur Berechnung der ausgewählten Elemente noch einen Selektor S hinzufügen. Dieser Selektor dient als Filter für die Elemente, die für die :nth-child-Berechnung herangezogen werden sollen.
Es gibt keine Einschränkungen für die Komplexität des verwendeten Filterselektors. Es ist nicht ganz klar, ob Pseudoelemente darin verwendet werden dürfen, hier unterscheiden sich die Entwurfsstände der Spezifikation. Ob die Verwendung eines Pseudoelements in einem solchen Selektor irgendeinen Nutzen hat, scheint jedoch zweifelhaft. Wichtig ist aber vor allem, dass der Selektor auch Kombinatoren enthalten kann und deshalb nicht nur einen einfachen Selektor darstellt, der sich lediglich auf das Element bezieht, für das :nth-child() angegeben wird.
Wenn Sie in einer Liste, in der einige Einträge mit einer Klasse markiert sind, nur die ersten drei markierten Einträge hervorheben wollen, dann ist das mit :nth-child(-n+3 of .marker) einfach erledigt. Ohne of müssten Sie auf JavaScript zurückgreifen. Das folgende Beispiel zeigt den Unterschied der falschen Schreibweise li.marker:nth-child(-n+3) (die Vordergrundfarbe) und :nth-child(…of…) (die Hintergrundfarbe):
ul li.marker:nth-child(-n+3) {
color: red;
}
ul :nth-child(-n+3 of .marked li.marker) {
background-color: yellow;
}
<ul class="marked">
<li>Eins</li>
<li class="marker">Zwei</li>
<li class="marker">Drei</li>
<li>Vier</li>
<li>Fünf</li>
<li class="marker">Sechs</li>
<li>Sieben</li>
</ul>
:nth-child(-n+3 of .marked li.marker) nicht ganz eindeutig ist. Im Beispiel ist das <ul>-Element mit der Klasse marked versehen, der Selektor würde aber auch dann zutreffen, wenn die marked-Klasse auf irgendeinem Elternelement des <ul>-Elements gesetzt wäre!nth-last-child
Der Selektor :nth-last-child() funktioniert in völliger Analogie zu :nth-child(), nur dass die Zählung von hinten beginnt. Die of selector Erweiterung ist ebenfalls verfügbar.
tr:nth-last-child(3n+1) {
background-color: #e4ebf2 ;
color: #000;
}
In diesem Beispiel wird eine Tabelle dargestellt.
Zunächst werden alle Zeilen mit background:#fffbf0; eingefärbt. Dann werden mit Hilfe des Ausdrucks tr:nth-last-child(3n+1) { background-color: #e4ebf2; } die Zeilen 3, 6 und 9 (also die 1., 4. und 7. Zeile von hinten) anders eingefärbt.
only-child
Der Selektor :only-child spricht ein Element an, welches das einzige Kind seines Elternelementes ist.
li:only-child {
border: medium dotted blue;
}
In diesem Beispiel erhält nur das 4. Listenelement einen blauen Rahmen, weil es das einzige Listenelement in seiner Liste ist.
:only-child ist identisch zu :first-child:last-child, :first-child:nth-last-child(1), :nth-child(1):last-child sowie :nth-child(1):nth-last-child(1) allerdings mit anderer Spezifität.Pseudoklassen für Kindelemente eines bestimmten Elementtyps
Von diesen Pseudoklassen werden nur die Kindelemente eines bestimmten Elementtyps betrachtet. Im Gegensatz dazu werden mit :…-child alle Kindelemente herangezogen. Der Unterschied ist anschaulich etwa der zwischen erster Tochter und erstem Kind.
h2:first-of-type findet zum Beispiel das erste h2-Element. Sie könnten den Elementselektor aber auch weglassen, erhalten dann aber ein Ergebnis, das nur selten einen Sinn ergibt, weil dann jedes Element, dass das letzte Kindelement seines Typs ist, ausgewählt wird.first-of-type
Mithilfe des Selektors :first-of-type ist es möglich, die jeweils ersten Kindelemente eines bestimmten Typs auszuwählen.
h2:first-of-type {
border: medium solid hotpink;
}
In diesem Beispiel erhält die erste Überschrift zweiter Ordnung einen pinken Rahmen. Falls Ihr Dokument in – beispielsweise – mehrere <section>-Elemente aufgeteilt ist, in denen sich jeweils <h2>-Überschriften befinden, dann würde in jeder Section die erste h2 Überschrift diesen Rahmen erhalten.
h2:first-child würde hier nichts selektieren, weil die Überschriften zweiter Ordnung das zweite und vierte Kind des body-Elements sind.last-of-type
Der Selektor :last-of-type funktioniert in völliger Analogie zu first-of-type.
h2:last-of-type {
border: medium solid firebrick;
}
In diesem Beispiel erhält die letzte Überschrift zweiter Ordnung einen roten Rahmen.
h2:last-child könnte in diesem Beispiel nichts selektieren, weil die Überschriften zweiter Ordnung das zweit- und viertletzte Kind des body-Elements sind.nth-of-type
Mithilfe des Selektors :nth-of-type() ist es möglich, das n-te Kindelement eines Elementtyps in einem Elternelementes zu selektieren. Der Selektor erwartet als Argument einen mathematischen Ausdruck, der einer arithmetischen Zahlenfolge mit ganzzahligen Koeffizienten entspricht, oder eins der Schlüsselwörter even oder odd für alle geraden oder ungeraden Elemente eines Typs.
tr:nth-of-type(odd) td:nth-of-type(even){
background: black;
}
tr:nth-of-type(even) td:nth-of-type(odd) {
background: black;
}
In diesem Beispiel wird ein Schachbrett dargestellt.
Zunächst werden in der 1., 3., 5. und 7. Tabellenzeile die geradzahligen td-Elemente mit einem schwarzen Hintergrund versehen. Das Feld B8 zum Beispiel ist schwarz, weil es das zweite „<td>-Kind“ der Zeile ist.
Anschließend werden in den geraden Tabellenzeilen die ungeraden td-Elemente schwarz eingefärbt. A7 ist schwarz, denn es ist das erste „<td>-Kind“ der Zeile.
:nth-of-type(… of selector) existiert nicht. Verwenden Sie dafür :nth-child() mit einem of-Selektor, der den gewünschten Elementtyp enthält.
:nth-of-type(An+B) selektiert all diejenigen Geschwisterelemente deren „Platznummer“ bei Division durch A den Rest B lässt.
:nth-of-type(odd) ist identisch zu :nth-of-type(2n+1) oder :nth-of-type(2n-1) (ungerade Platznummer).
:nth-of-type(even) ist identisch zu :nth-of-type(2n) (gerade Platznummer).
:nth-of-type(B) selektiert nur das B-te Element des entsprechenden Typs.
:nth-of-type(n) selektiert alle Elemente des entsprechenden Typs.nth-last-of-type
Der Selektor :nth-last-of-type funktioniert analog zu :nth-of-type(), nur dass die Zählung von hinten beginnt.
p:nth-last-of-type(3n+1) {
background-color: red;
}
In diesem Beispiel erhalten der letzte, der 4.-letzte und der 7.-letzte Absatz einen roten Hintergrund, und zwar unabhängig davon, ob überhaupt, welche und wieviele Elemente davor, danach oder dazwischen stehen.
only-of-type
Der Selektor :only-of-type spricht ein Element dann an, wenn es das einzige Kind dieses Typs seines Elternelementes ist.
em {
font-weight: bold;
} em:only-of-type {
color: red;}
In diesem Beispiel werden alle em-Elemente fett formatiert; das 3. erhält zusätzlich die Schriftfarbe rot, weil es das einzige em-Element seines Absatzes ist. Dass es noch ein b-Element als Geschwisterelement besitzt, ist nicht von Bedeutung, verhindert jedoch das Ansprechen durch em:only-child.
:only-of-type ist identisch zu :first-of-type:last-of-type, :first-of-type:nth-last-of-type(1), :nth-of-type(1):last-of-type sowie :nth-of-type(1):nth-last-of-type(1) allerdings mit anderer Spezifität.
Weblinks
- CSS3 structural pseudo-class selector tester (Lea Verou)
tr:nth-child(odd) {background-color: #e4ebf2;}erhält jede ungerade Tabellenzeile eine andere Hintergrundfarbe.