Der Beitrag "Alle CSS3 Selektoren im Detail" besteht aus fünf Seiten

• Teil 1: Alle CSS3 Selektoren im Detail - Einfachselektoren (Simple selectors)
• Teil 2: Alle CSS3 Selektoren im Detail - Strukturpseudoklassen (Structural pseudo-classes)
• Teil 3: Alle CSS3 Selektoren im Detail - Pseudoklassen (Pseudo-classes) - alle anderen
• Teil 4: Alle CSS3 Selektoren im Detail - Kombinationsselektoren (Combinators)
• Teil 5: Alle CSS3 Selektoren im Detail - Pseudoelemente (Pseudo-elements)

Strukturpseudoklassen (Structural pseudo-classes) - Alle CSS3 Selektoren im Detail

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.

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.

1. Code-Beispiel für die Strukturpseudoklasse :nth-child(n)

HTML

<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.

CSS

#demo-nthchild1 li:nth-child(4) {
   background-color: gold;
}
 

Über den Selektor :nth-child(4) wird das 4. Element in der Liste »angesteuert«.

So sieht's aus

Die CSS-Regel wirkt in diesem Beispiel dann nur auf das 4. Element.

2. Code-Beispiel für die Strukturpseudoklasse :nth-child(n)

HTML

<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.

CSS

#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.

So sieht's aus

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.

3. Code-Beispiel für die Strukturpseudoklasse :nth-child(n)

HTML

<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.

CSS

#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.

So sieht's aus

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.

Code-Beispiel für die Strukturpseudoklasse :nth-last-child(n)

HTML

<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.

CSS

#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.

So sieht's aus

Die CSS-Regel wirkt in dem Fall auf das 1. Element, sprich: das 5. von hinten.

Code-Beispiel für die Strukturpseudoklasse :nth-of-type(n)

HTML

<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.

CSS

#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.

So sieht's aus

Die Ansicht zeigt, dass das 3. strong über die CSS-Regel gesteuert wird, unabhängig davon, welche Elemente dazwischen liegen.

Code-Beispiel für die Strukturpseudoklasse :nth-last-of-type(n)

HTML

<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.

CSS

#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.

So sieht's aus

Das 1. strong von hinten entspricht dem Selektor der CSS-Regel.

Code-Beispiel für die Strukturpseudoklasse :first-child

HTML

<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.

CSS

.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.

So sieht's aus

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.)

Code-Beispiel für die Strukturpseudoklasse :last-child

HTML

<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.

CSS

.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.

So sieht's aus

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.

Code-Beispiel für die Strukturpseudoklasse :first-of-type

HTML

<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.

CSS

#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.

So sieht's aus

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.

Code-Beispiel für die Strukturpseudoklasse :last-of-type

HTML

<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.

CSS

#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.

So sieht's aus

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.

Code-Beispiel für die Strukturpseudoklasse :empty

HTML

<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.

CSS

#demo-empty :empty {
    background-color: darkred;
}

Über den Selektor :empty wird in der Tabelle für alle leeren Zellen eine dunkelrote Hintergrundfarbe definiert.

So sieht's aus

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"

• Teil 1: Alle CSS3 Selektoren im Detail - Einfachselektoren (Simple selectors)
• Teil 2: Alle CSS3 Selektoren im Detail - Strukturpseudoklassen (Structural pseudo-classes)
• Teil 3: Alle CSS3 Selektoren im Detail - Pseudoklassen (Pseudo-classes) - alle anderen
• Teil 4: Alle CSS3 Selektoren im Detail - Kombinationsselektoren (Combinators)
• Teil 5: Alle CSS3 Selektoren im Detail - Pseudoelemente (Pseudo-elements)