CSS/Tutorials/Selektoren/strukturelle Pseudoklassen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Grundkenntnisse in
HTML
CSS


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.

Im Einzelnen sind dies

  • :root, für das Wurzelelement
  • :empty, für leere Elemente

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.

Selektoren für Geschwisterelemente

Diese Selektoren treffen nur auf bestimmte Kindelemente zu. Im Gegensatz dazu werden mit :…-child alle Kindelemente selektiert. Der Unterschied ist anschaulich etwa der zwischen erster Tochter und erstem Kind.

Beachten Sie: Selektoren wie strukturelle Pseudoklassen werden nicht auf die tatsächliche Reihenfolge und Verschachtelung der Elemente in einem Dokument angewendet, sondern auf den vom Parser erzeugten Elementbaum (DOM). Dieser weicht z. B. dann vom Quelltext des Dokuments ab, wenn der HTML-Parser Fehlerkorrekturen durchführt.

root[Bearbeiten]

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.

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Pseudoklasse root</title> <style> :root { color: red; } html { color: blue; } body { width: 40em; } </style> </head> <body> <h1>Demonstration der Pseudoklasse <code>:root</code></h1> <p>Von Selektoren mit gleicher ...</p> </body> </html>

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[Bearbeiten]

first-child[Bearbeiten]

Mithilfe des Selektors :first-child ist es möglich, erste Kindelemente auszuwählen.

Beispiel ansehen …
:first-child { 
  border: medium solid blue; 
}

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.

Beachten Sie: Der Selektor 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[Bearbeiten]

Der Selektor :last-child kann verwendet werden, um das letzte Kind eines Elternelementes zu selektieren.


Beispiel ansehen …
:last-child { 
  border: medium solid 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.

nth-child[Bearbeiten]

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

Tabelle im Zebralook[Bearbeiten]

Tablle mit Streifen ansehen …
      table {width: 95%;}
      th {
        background-color: #666; 
        color: #fff;
      }
      tr {
        background-color: #fffbf0;
        color: #000;
      }
      tr:nth-child(odd) {
        background-color: #e4ebf2;
      }
Mit tr:nth-child(odd) {background-color: #e4ebf2;} erhält jede ungerade Tabellenzeile eine andere Hintergrundfarbe.
    <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>
In diesem Beispiel wird eine Tabelle dargestellt.

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[Bearbeiten]

Tabelle mit Schachbrettmuster ansehen …
table { border-collapse: collapse; } td { width: 30px; height: 30px; border: thin solid; } tr:nth-child(odd) td:nth-child(odd) { background: black; } tr:nth-child(even) td:nth-child(even) { background: black; }
    <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-last-child[Bearbeiten]

Der Selektor :nth-last-child() funktioniert in völliger Analogie zu :nth-child(), nur dass die Zählung von hinten beginnt.

Beispiel ansehen …
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[Bearbeiten]

Der Selektor :only-child spricht ein Element an, welches das einzige Kind seines Elternelementes ist.

Beispiel ansehen …
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.

Beachten Sie: :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.

Selektoren für Geschwisterelemente[Bearbeiten]

first-of-type[Bearbeiten]

Mithilfe des Selektors :first-of-type ist es möglich, die jeweils ersten Kindelemente einer bestimmten Art auszuwählen.

Beispiel ansehen …
h2:first-of-type { 
  border: medium solid hotpink; 
}

In diesem Beispiel erhält die erste Überschrift zweiter Ordnung einen pinken Rahmen.

Beachten Sie: Der Selektor h2:first-child könnte hier nichts selektieren, weil die Überschriften zweiter Ordnung das zweite und vierte Kind des body-Elements sind.

last-of-type[Bearbeiten]

Der Selektor :last-of-type funktioniert in völliger Analogie zu first-of-type.

die letzte Überschrift! ansehen …
h2:last-of-type { 
  border: medium solid firebrick; 
}

In diesem Beispiel erhält die letzte Überschrift zweiter Ordnung einen roten Rahmen.

Beachten Sie: Der Selektor 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[Bearbeiten]

Mithilfe des Selektors :nth-of-type() ist es möglich, das n-te gleichartige Kindelement eines Elternelementes zu selektieren. Der Selektor erwartet als Argument einen mathematischen Ausdruck, der einer arithmetischen Zahlenfolge mit ganzzahligen Koeffizienten entspricht.

Schachbrettmusster ansehen …
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.

Vergleiche: :nth-child
Beachten Sie: :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) und :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[Bearbeiten]

Der Selektor :nth-last-of-type funktioniert in völliger Analogie zu :nth-of-type(), nur dass die Zählung von hinten beginnt.

Beispiel ansehen …
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[Bearbeiten]

Der Selektor :only-of-type spricht ein Element dann an, wenn es das einzige Kind dieses Typs seines Elternelementes ist.

Beispiel ansehen …

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.

Beachten Sie: :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.



Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]