Struktur-Pseudoklassen

3.1 Pseudoklasse :first-child

Struktur-Pseudoklassen in CSS erlauben es, Elemente basierend auf ihrer Position im Dokumentenbaum zu wählen und zu stylen. Das ist besonders nützlich für die Erstellung genauer und detaillierterer Stile, die auf bestimmte Elemente angewendet werden. Betrachten wir die Pseudoklassen :first-child, :last-child, :nth-child und :nth-of-type.

Die Pseudoklasse :first-child wählt das erste Kindelement seines Elternteils aus. Das ist nützlich für die Stilgestaltung des ersten Elements in einer Gruppe gleichartiger Elemente wie Listen oder Absätze.

Syntax:

    
      selector:first-child {
        eigenschaften: werte;
      }
    
  

Beispiel der Verwendung

In diesem Beispiel wird das erste Listenelement fett und rot hervorgehoben und der erste Absatz innerhalb eines div wird in Großbuchstaben umgewandelt:

    
      /* Stil des ersten Listenelements */

      li:first-child {
        font-weight: bold;
        color: red;
      }

      /* Stil des ersten Absatzes in div */

      div p:first-child {
        text-transform: uppercase;
      }
    
  

3.2 Pseudoklasse :last-child

Die Pseudoklasse :last-child wählt das letzte Kindelement seines Elternteils aus. Sie wird verwendet, um das letzte Element in einer Gruppe gleichartiger Elemente zu stylen.

Syntax:

    
      selector:last-child {
        eigenschaften: werte;
      }
    
  

Beispiel der Verwendung

In diesem Beispiel wird das letzte Listenelement kursiv und blau hervorgehoben, und der letzte Absatz innerhalb eines div wird unterstrichen:

    
      /* Stil des letzten Listenelements */

      li:last-child {
        font-style: italic;
        color: blue;
      }

      /* Stil des letzten Absatzes in div */

      div p:last-child {
        text-decoration: underline;
      }
    
  

3.3 Pseudoklasse :nth-child

Die Pseudoklasse :nth-child ermöglicht die Auswahl von Elementen basierend auf ihrer Position in einer Gruppe. Sie nimmt ein Argument an, das bestimmt, welche Elemente ausgewählt werden. Das Argument kann eine Zahl, ein Schlüsselwort oder ein Ausdruck sein.

Syntax:

    
      selectornth-child(argument) {
        eigenschaften: werte;
      }
    
  

Argumente:

• Zahl: wählt das Element an der angegebenen Position
• Schlüsselwörter: odd (ungerade) und even (gerade)
• Ausdruck: Format an+b, wobei a und b Zahlen sind

Beispiel 1: Auswahl ungerader Elemente

In diesem Beispiel werden alle ungeraden Listenelemente mit einem hellgrauen Hintergrund gestylt:

    
      /* Stil ungerader Listenelemente */

      li:nth-child(odd) {
        background-color: #f0f0f0;
      }
    
  

Beispiel 2: Auswahl eines Elements an einer bestimmten Position

In diesem Beispiel wird das dritte Listenelement fett und grün hervorgehoben:

    
      /* Stil des dritten Listenelements */

      li:nth-child(3) {
        font-weight: bold;
        color: green;
      }
    
  

Beispiel 3: Verwendung von Ausdrücken

In diesem Beispiel werden jedes zweite Element, beginnend mit dem ersten, mit einem hellgrauen Hintergrund gestylt:

    
      /* Stil jedes zweiten Elements, beginnend mit dem ersten */

      li:nth-child(2n+1) {
        background-color: #e0e0e0;
      }
    
  

3.4 Pseudoklasse :nth-of-type

Die Pseudoklasse :nth-of-type ähnelt :nth-child, wählt jedoch Elemente basierend auf ihrem Typ unter den Kindelementen eines gemeinsamen Elternteils aus. Dadurch können bestimmte Typen von Elementen ausgewählt werden, auch wenn diese nicht die ersten Kinder ihres Elternteils sind.

Syntax:

    
      selector:nth-of-type(argument) {
        eigenschaften: werte;
      }
    
  

Argumente:

• Zahl: wählt das Element an der angegebenen Position unter Elementen desselben Typs
• Schlüsselwörter: odd (ungerade) und even (gerade)
• Ausdruck: Format an+b, wobei a und b Zahlen sind

Beispiel 1: Auswahl gerader Absätze

In diesem Beispiel werden alle geraden Absätze mit einem hellgrauen Hintergrund gestylt:

    
      /* Stil gerader Absätze */

      p:nth-of-type(even) {
        background-color: #d0d0d0;
      }
    
  

Beispiel 2: Auswahl eines Elements an einer bestimmten Position unter einem Typ

In diesem Beispiel wird die zweite h2-Überschrift vergrößert und orange gefärbt:

    
      /* Stil der zweiten h2-Überschrift */

      h2:nth-of-type(2) {
        font-size: 2em;
        color: orange;
      }
    
  

Beispiel 3: Verwendung von Ausdrücken

In diesem Beispiel wird jedes dritte Listenelement, beginnend mit dem zweiten, mit einem hellgrauen Hintergrund gestylt:

    
      /* Stil jedes dritten Listenelements, beginnend mit dem zweiten */

      li:nth-of-type(3n+2) {
        background-color: #c0c0c0;
      }