Einführung in Pseudoklassen

1.1 Pseudoklassen

Pseudoklassen in CSS sind spezielle Schlüsselwörter, die zu Selektoren hinzugefügt werden, um ihren Zustand oder ihre Position im Dokumentbaum anzugeben. Sie ermöglichen es, Elemente basierend auf ihrem Zustand oder ihrer Beziehung zu anderen Elementen zu stylen, ohne Klassen oder IDs im HTML-Code hinzufügen zu müssen.

Grundkonzepte der Pseudoklassen

1. Bestimmung des Zustands eines Elements:
   • Pseudoklassen können auf den Zustand eines Elements hinweisen, wie z.B. Hover, Fokus oder Aktivierung
2. Bestimmung der Position eines Elements:
   • Pseudoklassen können auf die Position eines Elements im Verhältnis zu seinem übergeordneten Element oder anderen Elementen hinweisen, wie z.B. erstes oder letztes Element
3. Spezielle Fälle und logische Gruppen:
   • Pseudoklassen können auch spezielle Fälle definieren, wie z.B. das erste Element eines Typs oder ungerade/gerade Elemente

Wie man Pseudoklassen verwendet

Pseudoklassen werden dem Selektor mit einem Doppelpunkt (:) hinzugefügt. Sie können sowohl mit Elementselektoren als auch mit Klassen, IDs und anderen Selektoren verwendet werden.

Syntax:

    
      selector:pseudoklasse {
        eigenschaften: werte;
      }
    
  

Beispiele zur Verwendung

1. Elementselektor mit Pseudoklasse

In diesem Beispiel werden alle ersten Absätze (<p>) innerhalb ihrer übergeordneten Elemente fett dargestellt:

    
      p:first-of-type {
        font-weight: bold;
      }
    
  

2. Klassenselektor mit Pseudoklasse

In diesem Beispiel wird der Hintergrund aller Elemente mit der Klasse .button blau, wenn der Mauszeiger darüber schwebt:

    
      .button:hover {
        background-color: blue;
      }
    
  

3. Kombinierte Selektoren mit Pseudoklassen

In diesem Beispiel werden alle geraden Absätze (<p>) innerhalb von Elementen mit der Klasse .container rot eingefärbt:

    
      .container > p:nth-child(2n) {
          color: red;
      }
    
  

1.2 Beispiele für Pseudoklassen und deren Anwendung

1. Pseudoklassen, die den Zustand bestimmen

Pseudoklassen, die den Zustand eines Elements bestimmen, ermöglichen es, dessen Stil basierend auf Benutzerinteraktionen oder dem Zustand des Elements zu ändern.

    
      a:link {
        color: blue;
      }

      a:visited {
        color: purple;
      }

      a:hover {
        color: red;
      }

      a:active {
        color: green;
      }
    
  

2. Pseudoklassen, die die Position bestimmen

Pseudoklassen, die die Position eines Elements bestimmen, ermöglichen es, Stile auf Elemente basierend auf ihrer Position in der DOM-Struktur anzuwenden.

    
      li:first-child {
          font-style: italic;
      }

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

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

      li:nth-child(even) {
          background-color: #ffffff;
      }
    
  

3. Pseudoklassen für logische Gruppen

Diese Pseudoklassen ermöglichen es, Elemente basierend auf ihren logischen Gruppen oder Typen zu stylen.

    
      input:checked {
        background-color: yellow;
      }

      input:disabled {
        background-color: grey;
      }

      input:enabled {
        background-color: white;
      }