Pseudoklassen

7.1 Zustands-Pseudoklassen

Pseudoklassen in CSS sind spezielle Schlüsselwörter, die an Selektoren angehängt werden, um den Zustand eines Elements oder seine Position innerhalb der Dokumentenstruktur anzugeben. Sie ermöglichen es, Elemente in bestimmten Zuständen oder Situationen zu stylen, die mit herkömmlichen Selektoren nicht angegeben werden können.

Wichtige Pseudoklassen:

• Zustands-Pseudoklassen
• Strukturelle Pseudoklassen
• Form-Pseudoklassen
• Navigations-Pseudoklassen

Syntax:

    
      selektor:pseudoklasse {
        eigenschaft: wert;
        eigenschaft: wert;
      }
    
  

Zustands-Pseudoklassen

Diese Pseudoklassen werden verwendet, um Elemente je nach ihrem aktuellen Zustand zu stylen, zum Beispiel bei Mauszeigerüberlagerung oder aktivem Element:

• :hover — wird angewendet, wenn der Benutzer den Cursor über ein Element bewegt
• :active — wird angewendet, wenn ein Element aktiviert wird (normalerweise bei Klick)
• :focus — wird angewendet, wenn ein Element fokussiert ist (z.B. bei Tastaturnutzung)
• :visited — wird auf besuchte Links angewendet
• :link — wird auf nicht besuchte Links angewendet

7.2 Pseudoklasse hover

Die Pseudoklasse :hover wird auf ein Element angewendet, wenn der Benutzer den Mauszeiger darüber bewegt. Dies wird häufig verwendet, um das Aussehen von Links und Buttons bei Überlagerung zu ändern.

Syntax:

    
      selektor:hover {
        eigenschaft: wert;
        eigenschaft: wert;
      }
    
  

Beispiel:

Dieser Selektor ändert die Textfarbe und unterstreicht Links bei Mauszeigerüberlagerung.

    
      <a href="#">Platzhalter-Link</a>
    
  

    
      a:hover {
        color: red;
        text-decoration: underline;
      }
    
  

Anwendung:

• Verbessert die Benutzeroberfläche (UI) durch visuelles Feedback
• Wird für Buttons, Links und andere interaktive Elemente verwendet

7.3 Pseudoklasse focus

Die Pseudoklasse :focus wird auf ein Element angewendet, wenn es den Fokus erhält. Zum Beispiel beim Klick darauf oder beim Wechsel per Tabulator-Taste. Am häufigsten wird sie für Inputs und andere Formularelemente verwendet.

Syntax:

    
      selektor:focus {
        eigenschaft: wert;
        eigenschaft: wert;
      }
    
  

Beispiel:

Dieser Selektor ändert die Farbe des Randes eines Inputs und entfernt die Umrandung beim Fokusempfang.

    
      <input type="text" name="text" id="text">
    
  

    
      input:focus {
        border-color: blue;
        outline: none;
      }
    
  

Anwendung:

• Verbessert die Barrierefreiheit (accessibility) von Webseiten
• Macht interaktive Elemente beim Fokussieren auffälliger

7.4 Pseudoklasse nth-child

Die Pseudoklasse :nth-child wird auf Elemente basierend auf ihrer Position unter den Kind-Elementen des Elternteils angewendet. Sie nimmt ein Argument, das eine Zahl, ein Schlüsselwort oder ein Ausdruck sein kann.

Syntax:

    
      selektor:nth-child(n) {
        eigenschaft: wert;
        eigenschaft: wert;
      }
    
  

Beispiel:

Dieser Selektor ermöglicht es, Elemente basierend auf ihrer Position unter Geschwistern zu stylen.

    
      <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
        <li>Element 4</li>
        <li>Element 5</li>
        <li>Element 6</li>
        <li>Element 7</li>
      </ul>
    
  

    
      /* Wendet Styles auf alle ungeraden Kind-Elemente an */
      li:nth-child(odd) {
          background-color: lightgray;
      }

      /* Wendet Styles auf alle geraden Kind-Elemente an */
      li:nth-child(even) {
          background-color: lightblue;
      }

      /* Wendet Styles auf das zweite Kind-Element an */
      li:nth-child(2) {
          color: red;
      }
    
  

Anwendung:

• Stilisiert Tabellenspalten, Listenelemente und andere wiederholende Strukturen
• Ermöglicht die Erstellung komplexer Layouts und Stylings ohne Hinzufügen zusätzlicher Klassen

7.5 Beispiele für die Verwendung von Pseudoklassen

    
      <button type="button">Button</button>
    
  

    
      button:hover, button:focus {
        background-color: darkblue;
        color: white;
      }
    
  

Stilisierung von geraden Tabellenspielen:

    
      <table>
        <tr>
          <th>Name</th>
          <th>Menge</th>
          <th>Preis</th>
        </tr>
        <tr>
          <td>Produkt 1</td>
          <td>5</td>
          <td>10 Euro</td>
        </tr>
        <tr>
          <td>Produkt 2</td>
          <td>3</td>
          <td>15 Euro</td>
        </tr>
        <tr>
          <td>Produkt 3</td>
          <td>8</td>
          <td>7 Euro</td>
        </tr>
      </table>
    
  

    
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
    
  

Ausschluss bestimmter Elemente aus einem allgemeinen Stil:

    
      <ul>
        <li class="list-item">Element 1</li>
        <li class="list-item">Element 2</li>
        <li class="list-item">Element 3</li>
        <li class="list-item">Element 4</li>
        <li class="list-item">Element 5</li>
        <li class="list-item">Element 6</li>
        <li class="list-item">Element 7</li>
      </ul>
    
  

    
      .list-item:not(:last-child) {
        border-bottom: 1px solid #ddd;
      }