Eine komfortable Neuerung des CSS3-Standards sind Strukturelle Pseudoklassen. Diese haben beispielsweise den Nutzen, jede zweite Zeile einer Tabelle zu erkennen, um diese dann mit einer wechselnden oder mit dem Fachbegriff »iterierender« Hintergrundfarbe zu versehen, oder auch den letzten Eintrag in einer Liste zu erkennen.
Diese Pseudoklassen haben langfristig hohes Potential, da damit das Setzen
von CSS-Klassen im HTML in jeder zweiten Tabellenzeile oder im ersten
beziehungsweise letzten Listeneintrag entfällt und sich
Programmierer, die HTML
generieren, nicht mehr um Dinge kümmern müssen, die
für die Gestaltung
relevant sind. Das Setzen solcher Klassen ist lediglich notwendig, um das
Layout steuern zu können. Mit Strukturpseudoklassen werden solche
class
-Attribute im HTML überflüssig,
die Trennung von Struktur und Design wird
so noch mal schärfer abgegrenzt.
Strukturpseudoklassen | Beschreibung | Code-Beispiel |
---|---|---|
:root |
Wurzelelement eines Dokuments, in HTML immer das html-Element. | |
:nth-child(n) |
Steuert jedes n-te Element innerhalb eines Elternelements. | :nth-child(n) |
:nth-last-child(n) |
Steuert jedes n-te Kindelement in einem Element, dabei werden die Kindelemente von hinter durchlaufen. | :nth-last-child(n) |
:nth-of-type(n) |
Steuert jedes n-te Element vom gleichen HTML-Typ auf gleicher Ebene (Geschwisterelemente). | :nth-of-type(n) |
:nth-last-of-type(n) |
Steuert jedes n-te Element auf gleicher Ebene (Geschwisterelemente), dabei werden die Elemente von hinter durchlaufen. | :nth-last-of-type(n) |
:first-child |
Steuert das erste Kindelement innerhalb eines Elements. | :first-child |
:last-child |
Steuert das letzte Kindelement innerhalb eines Elements. | :last-child |
:first-of-type |
Steuert das erste Element des gleichen HTML-Elementtyps innerhalb eines Elternelements. | :first-of-type |
:last-of-type |
Steuert das letzte Element des gleichen HTML-Elementtyps innerhalb eines Elternelements. | :last-of-type |
:only-child |
Steuert ein Element, das keine Geschwisterelemente hat und damit das einzige Kindelement im übergeordneten Element ist. | |
:only-of-type |
Steuert ein Element, das keine Geschwisterelemente vom gleichen HTML-Typ hat und damit das einzige Kindelement dieser Sorte im übergeordneten Element ist. | |
:empty |
Steuert leere Elemente | :empty |
Die Strukturpseudoklassen :nth-child(n)
,
:nth-last-child(n)
,
:nth-of-type(n)
und :nth-last-of-type(n)
können individuell gesteuert werden.
Das »n« in dem Ausdruck muss als n
in der
Angabe vergeben sein, es ist in
diesem Sinne ein fest stehendes Schlüsselwort. Darauf können dann
»Rechenoperationen« angewendet werden.
li:nth-child(2n) {
color: red;
}
n kann mit dem Wert 1 gleich gesetzt werden, dieses Beispiel würde also 2*1 = 2 ergeben, was »jedes zweite Element« treffen würde. Dabei würde das erste nicht, das zweite Element dann aber rot eingefärbt werden.
Den Startwert kann man ebenfalls beeinflussen:
li:nth-child(2n+1) {
color: red;
}
Hier wäre die Berechnung wie oben, nur dass dieser Codeabschnitt nicht bei
0, sondern 1 anfängt zu zählen und das »jeweils
zweite Element« um eine
Position verschoben ist. Hier kann sowohl eine +
oder auch
ein -
Operation
durchgeführt werden.
Zusätzlich stehen die Schlüsselworte even
(gerade) und odd
(ungerade) zur
Verfügung. Folgende Codeschnipsel entsprechen den vorherigen Bespielen:
li:nth-child(even) {
color: red;
}
li:nth-child(odd) {
color: red;
}
Gewöhnungsbedürftig ist sicher die Berechnung der Schritte, wenn Sie von hinten aus gestartet wird:
ol li:nth-last-child(5n) {
color: red;
}
Mit diesem Ausdruck steuern Sie jedes fünfte Element von hinten aus berechnet. Sowohl für die Berechnung von vorne als auch von hinten wird stets bei 0 begonnen. Nimmt man den Ausdruck wörtlich »jedes 5. Element«, so sind die ersten vier Elemente nicht von der Regel getroffen, dann aber das fünfte.
:nth-child(n)
<ol id="demo-nthchild1">
<li>Lady Gaga</li>
<li>Madonna</li>
<li>Kylie Minogue</li>
<li>Britney Spears</li>
<li>Katy Perry</li>
</ol>
Das HTML besteht aus einer geordneten Liste mit fünf Einträgen.
#demo-nthchild1 li:nth-child(4) {
background-color: gold;
}
Über den Selektor :nth-child(4)
wird das 4. Element in der Liste »angesteuert«.
Die CSS-Regel wirkt in diesem Beispiel dann nur auf das 4. Element.
:nth-child(n)
<ol id="demo-nthchild2">
<li>Lady Gaga</li>
<li>Madonna</li>
<li>Kylie Minogue</li>
<li>Britney Spears</li>
<li>Katy Perry</li>
<li>Leona Lewis</li>
<li>Sarah Connor</li>
<li>Pink</li>
<li>Jennifer Lopez</li>
<li>Melanie Chisholm</li>
</ol>
Das HTML besteht hier ebenfalls aus einer Liste mit mehreren Einträgen.
#demo-nthchild2 li:nth-child(3n) {
background-color: gold;
}
Über den Selektor li:nth-child(3n)
wird nicht nur für das 3., sondern für jedes
dritte Element eine Hintergrundfarbe definiert. Das n
ist verantwortlich für die
Wiederholungen.
Die CSS-Regel bewirkt, dass jedes dritte Element hinterlegt ist. Dabei wird vom ersten Element aus gezählt, das 3. Element ist dann als erstes betroffen, danach jedes 3. weitere.
:nth-child(n)
<ol id="demo-nthchild3">
<li>Lady Gaga</li>
<li>Madonna</li>
<li>Kylie Minogue</li>
<li>Britney Spears</li>
<li>Katy Perry</li>
<li>Leona Lewis</li>
<li>Sarah Connor</li>
<li>Pink</li>
<li>Jennifer Lopez</li>
<li>Melanie Chisholm</li>
</ol>
Das HTML besteht hier ebenfalls aus einer Liste mit mehreren Einträgen.
#demo-nthchild3 li:nth-child(3n+1) {
background-color: gold;
}
Über den Selektor li:nth-child(3n+1)
wird hier ebenfalls für jedes
dritte Element eine Hintergrundfarbe definiert. Das n
definiert, dass eine Iteration stattfindet.
Über das +1
wird der Zählerstart
um ein Element nach rechts verschoben, damit ist nicht das 3., 6. und 9. Element, sondern das 4., 7. und 10. Element, als
auch das 1. Element angesprochen.
Die CSS-Regel bewirkt, dass jedes dritte Element hinterlegt ist. Wird nicht beim ersten, sondern ein Element weiter
mit der Wiederholung begonnen. Auch ein negativer Zählerstart über li:nth-child(3n-1)
ist
möglich, dann beginnt die Zahlung für die Wiederholungen eins weiter links.
:nth-last-child(n)
<ol id="demo-nthlastchild">
<li>Lady Gaga</li>
<li>Madonna</li>
<li>Kylie Minogue</li>
<li>Britney Spears</li>
<li>Katy Perry</li>
</ol>
Die gleiche Liste wie zuvor, lediglich die id
der ol
ist für dieses Beispiel angepasst.
#demo-nthlastchild li:nth-last-child(5) {
background-color: lime;
}
Über den Selektor :nth-last-child(5)
wird das 5. Element »angesteuert«.
Allerdings wird bei :nth-last-child(n)
das ol
-Element von hinten durchlaufen.
Die CSS-Regel wirkt in dem Fall auf das 1. Element, sprich: das 5. von hinten.
:nth-of-type(n)
<p id="demo-nthoftype"><strong>strong</strong> und
<abbr>abbr</abbr> und <small>small</small> und
<strong>strong</strong> und <abbr>abbr</abbr> und
<small>small</small> und <strong>strong</strong> und
<abbr>abbr</abbr> und <small>small</small> und
<strong>strong</strong> und <abbr>abbr</abbr> und
<small>small</small> und <strong>strong</strong> und
<abbr>abbr</abbr> und <small>small</small>.</p>
Das HTML besteht hier aus diversen strong
-, abbr
- und small
-Elementen.
#demo-nthoftype strong:nth-of-type(3) {
color: red;
font-size: 2em;
}
Über den Selektor strong:nth-of-type(3)
werden jetzt nur die strong
-Elemente »gesucht«
und davon das 3. vorkommende angesprochen.
strong und abbr und small und strong und abbr und small und strong und abbr und small und strong und abbr und small und strong und abbr und small.
Die Ansicht zeigt, dass das 3. strong
über die CSS-Regel gesteuert wird, unabhängig davon,
welche Elemente dazwischen liegen.
:nth-last-of-type(n)
<p id="demo-ntlasthoftype"><strong>strong</strong> und
<abbr>abbr</abbr> und <small>small</small> und
<strong>strong</strong> und <abbr>abbr</abbr> und
<small>small</small> und <strong>strong</strong> und
<abbr>abbr</abbr> und <small>small</small> und
<strong>strong</strong> und <abbr>abbr</abbr> und
<small>small</small> und <strong>strong</strong> und
<abbr>abbr</abbr> und <small>small</small>.</p>
Gleiches HTML wie bei nth-of-type(n)
, lediglich mit angepasster id
für dieses Beispiel.
#demo-ntlasthoftype strong:nth-last-of-type(1) {
color: blue;
font-size: 2em;
}
Über den Selektor strong:nth-last-of-type(1)
wird jetzt das 1. Element vom Typ strong
ermittelt, allerdings beginnt hier die Suche von hinten.
strong und abbr und small und strong und abbr und small und strong und abbr und small und strong und abbr und small und strong und abbr und small.
Das 1. strong
von hinten entspricht dem Selektor der CSS-Regel.
:first-child
<p class="demo-firstchild">
Dies ist ein Satz mit einem
<strong>strong</strong>,
einem
<span>span</span>
und einem
<abbr>abbr</abbr>.
</p>
<p class="demo-firstchild">
Dies ist ein Satz mit einem
<button>button</button>,
einem
<strong>strong</strong>,
einem
<span>span</span>
und einem
<abbr>abbr</abbr>.
</p>
<p class="demo-firstchild">
Dies ist ein Satz mit einem
<button>button</button>,
einem
<strong>strong mit drei
<kbd>kbd</kbd>,
<kbd>kbd</kbd>,
<kbd>kbd</kbd>
darin </strong>,
einem
<span>span</span>
und einem
<abbr>abbr</abbr>.
</p>
Das HTML besteht hier aus drei p
-Elementen mit unterschiedlichen Kindelementen. Zu beachten ist,
dass im dritten p
-Element innerhalb des strong
nocht drei kbd
-Elemente geschachtelt sind.
.demo-firstchild :first-child {
background-color: lightblue;
}
Über den Selektor :first-child
wird das jeweils erste Kind-Element
innerhalb von p
-Elementen mit der Klasse demo-firstchild
gesteuert.
Dies ist ein Satz mit einem strong, einem span und einem abbr.
Dies ist ein Satz mit einem , einem strong, einem span und einem abbr.
Dies ist ein Satz mit einem , einem strong mit drei kbd, kbd, kbd darin , einem span und einem abbr.
Die CSS-Regel mit dem Selektor :first-child
bewirkt, dass in jedem HTML-Element das jeweils erste
Kind-Element hellblau eingefärbt wird. Dabei ist es ohne Bedeutung, von welchem Typ das erste Kind-Element ist.
Da in der dritten Zeile innerhalb des strong
weitere Elemente sind, wird auch dort das 1. Kind-Element eingefärbt (da es sich bei
dem Selektor .demo-firstchild :first-child
um eine einfachen Kombinationsselektor handelt.)
:last-child
<p class="demo-lastchild">
Dies ist ein Satz mit einem
<strong>strong</strong>,
einem
<span>span</span>
und einem
<abbr>abbr</abbr>.
</p>
<p class="demo-lastchild">
Dies ist ein Satz mit einem
<strong>strong</strong>,
einem
<span>span</span>
und einem
<abbr>abbr</abbr>
und einem
<input>-Feld.
</p>
Das HTML besteht in diesem Beispiel aus zwei p
-Elementen mit unterschiedlichen Kindelementen.
.demo-lastchild :last-child {
background-color: lightgreen;
}
Über den Selektor :first-child
wird das jeweils erste Kind-Element
innerhalb von p
-Elementen mit der Klasse demo-lastchild
gesteuert.
Dies ist ein Satz mit einem strong, einem span und einem abbr.
Dies ist ein Satz mit einem strong, einem span und einem abbr und einem -Feld.
Die CSS-Regel mit dem Selektor :last-child
bewirkt, dass in jedem HTML-Element das jeweils letzte
Kind-Element hellblau eingefärbt wird.
Dabei ist es ebenfalls ohne Bedeutung, von welchem Typ das erste Kind-Element ist.
:first-of-type
<p id="demo-firstoftype">
<strong>strong</strong> und
<abbr>abbr</abbr> und <small>small</small> und
<strong>strong</strong> und <abbr>abbr</abbr> und
<small>small</small> und <strong>strong</strong> und
<abbr>abbr</abbr> und <small>small</small> und
<strong>strong</strong> und <abbr>abbr</abbr> und
<small>small</small> und <strong>strong</strong> und
<abbr>abbr</abbr> und <small>small</small>.
</p>
Das HTML besteht aus einem p
-Element mit mehreren, unterschiedlichen Kindelementen.
#demo-firstoftype abbr:first-of-type {
background-color: yellowgreen;
font-size: 200%;
}
Über den Selektor abbr:first-of-type
wird das erste Kind-Element
vom Typ abbr
innerhalb von p
-Elementen mit der Klasse demo-firstoftype
gesteuert.
strong und abbr und small und strong und abbr und small und strong und abbr und small und strong und abbr und small und strong und abbr und small.
Die CSS-Regel mit dem Selektor abbr:first-of-type
bewirkt,
dass das erste Kind-Element vom Typ abbr
größer dargestellt wird und eine Hintergrundfarbe bekommt.
:last-of-type
<p id="demo-lastoftype">
<strong>strong</strong> und
<abbr>abbr</abbr> und <small>small</small> und
<strong>strong</strong> und <abbr>abbr</abbr> und
<small>small</small> und <strong>strong</strong> und
<abbr>abbr</abbr> und <small>small</small> und
<strong>strong</strong> und <abbr>abbr</abbr> und
<small>small</small> und <strong>strong</strong> und
<abbr>abbr</abbr> und <small>small</small>.
</p>
Das HTML besteht hier ebenfalls aus einem p
-Element mit mehreren, unterschiedlichen Kindelementen.
#demo-lastoftype abbr:last-of-type {
background-color: yellowgreen;
font-size: 200%;
}
Über den Selektor abbr:last-of-type
wird das letzte Kind-Element
vom Typ abbr
innerhalb von p
-Elementen mit der Klasse demo-lastoftype
gesteuert.
strong und abbr und small und strong und abbr und small und strong und abbr und small und strong und abbr und small und strong und abbr und small.
Die CSS-Regel mit dem Selektor abbr:last-of-type
bewirkt,
dass das letzte Kind-Element vom Typ abbr
größer dargestellt wird und eine türkis hinterlegt ist.
:empty
<table id="demo-empty">
<tr>
<th></th>
<th>Kopfzelle 1</th>
<th>Kopfzelle 2</th>
<th>Kopfzelle 3</th>
</tr>
<tr>
<th>Zeile 1</th>
<td>Bert</td>
<td> </td>
<td>Erni</td>
</tr>
<tr>
<th>Zeile 2</th>
<td>Tiffy</td>
<td>Samson</td>
<td>Oscar</td>
</tr>
<tr>
<th>Zeile 3</th>
<td> </td>
<td>Lilo</td>
<td> </td>
</tr>
</table>
In diesem Beispiel wird eine Tabelle verwendet. Nicht alle Kopfzellen (th
) und Zellen (td
)
sind mit Inhalt gefüllt.
#demo-empty :empty {
background-color: darkred;
}
Über den Selektor :empty
wird in der Tabelle für
alle leeren Zellen eine dunkelrote Hintergrundfarbe definiert.
Kopfzelle 1 | Kopfzelle 2 | Kopfzelle 3 | |
---|---|---|---|
Zeile 1 | Bert | Erni | |
Zeile 2 | Tiffy | Samson | Oscar |
Zeile 3 | Lilo |
Da der Selektor :empty
nicht mit einem th
oder td
kombiniert ist,
werden alle Arten von Zellen eingefärbt, die leer sind.
Weitere Seiten des Beitrags "Alle CSS3 Selektoren im Detail"