CSS/Tutorials/Selektoren/strukturelle Pseudoklassen

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Selektoren(Weitergeleitet von Zebrastreifen)
Wechseln zu: Navigation, Suche

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

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

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.

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

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

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

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

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.

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

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

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

Die ersten drei Einträge mit marker-Klasse ansehen …
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>
Beachten Sie, Beachten Sie, dass :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.

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

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.

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.

Empfehlung: Verwenden Sie die …-type Pseudoklassen zusammen mit einem Elementselektor. 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.

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

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

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

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.

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

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

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.



Weblinks