Struktur-Pseudoklassen
Beispiele
Mit diesen Selektoren kann man ganz gezielt das n-te Kind eines Elternelements ansprechen.
Syntax: E:root
Beispiel:
:root {
background-color: #fc0;
}
Diese Pseudoklasse spricht das Wurzelelement einer Seite an. Da in HTML immer das html
-Element das Wurzelelement ist, bewirkt diese Auszeichnung dasselbe wie
html {
background-color: #fc0;
}
Der einzige Unterschied: root
hat eine höhere Spezifizität als html
.
Syntax: E:nth-child(n)
Beispiel:
table tr:nth-child(2n+1){
background-color: #fff5dd;
}
Ziel: Die Zeilen einer Tabelle werden abwechselnd in unterschiedlichen Farben dargestellt („Zebra”-Tabelle).
Syntax: E:nth-last-child(n)
Beispiel:
Ziel:
Syntax: E:nth-of-type(n)
Beispiel:
Ziel:
Syntax: E:nth-last-of-type(n)
Beispiel:
Ziel:
Syntax: E:last-child
Beispiel:
Ziel:
Syntax: E:first-of-type
Beispiel:
Ziel:
Syntax: E:last-of-type
Beispiel:
Ziel:
Syntax: E:only-child
Beispiel:
Ziel:
Syntax: E:only-of-type
Beispiel:
Ziel:
Syntax: E:empty
Beispiel:
div:empty {
height: 10px;
background-color:#ff0;
outline: 1px solid #f00;
}
Spricht ein ansonsten völlig leeres („kinderloses”) <div></div>
an, könnte also zum Beispiel als trennendes Schmuckelement formatiert werden.
Auswahl
- Attribut-Selektoren
- Struktur-Pseudoklassen
- Pseudoklassen & -elemente
- Genereller Geschwister-Kombinator