Wesentliche Selektoren

4.1 Typ-Selektoren

Selektoren in CSS werden verwendet, um die Elemente zu bestimmen, auf die Styles angewendet werden. Die Hauptselektoren beinhalten Typ-, Klassen-, ID- und universelle Selektoren. Jeder dieser Selektoren hat seine eigenen Merkmale und Anwendungen.

Typ-Selektoren (Type Selectors)

Typ-Selektoren wenden Styles auf alle Elemente eines bestimmten Typs an. Zum Beispiel können Styles auf alle Absätze (<p>), Überschriften (<h1>, <h2> usw.) oder andere HTML-Tags angewendet werden.

    
      tagname {
        Eigenschaft: Wert;
        Eigenschaft: Wert;
      }
    
  

    
      p {
        color: blue;
        font-size: 14px;
      }
    
  

Dieser Selektor wendet Styles auf alle <p>-Elemente im Dokument an.

Merkmale:

• Wird auf alle Elemente des angegebenen Typs angewendet
• Nützlich für globale Styles, die auf alle Elemente eines bestimmten Typs angewendet werden sollten

4.2 Klassen-Selektoren

Klassen-Selektoren ermöglichen die Anwendung von Styles auf ein oder mehrere Elemente, die eine bestimmte Klasse haben. Klassen werden mit dem Attribut class in HTML definiert und durch einen Punkt (.) in CSS angezeigt.

Syntax:

    
      .classname {
        Eigenschaft: Wert;
        Eigenschaft: Wert;
      }
    
  

Beispiel:

    
      .button {
        background-color: green;
        color: white;
        padding: 10px;
      }
    
  

Dieser Selektor wendet Styles auf alle Elemente an, die die Klasse button haben.

Merkmale:

• Eine Klasse kann für mehrere Elemente verwendet werden
• Ermöglicht das einfache Anwenden gleicher Styles auf verschiedene Elemente

4.3 ID-Selektoren

ID-Selektoren wenden Styles auf ein Element mit einer einzigartigen ID an. IDs werden mit dem Attribut id in HTML definiert und durch das Rautezeichen (#) in CSS angezeigt.

Syntax:

    
      #uniq-id {
        Eigenschaft: Wert;
        Eigenschaft: Wert;
      }
    
  

Beispiel:

Dieser Selektor wendet Styles auf das Element mit der ID main an.

    
      /* Wählt das Element mit der ID #main */
      #main {
        width: 800px;
        background: yellow;
      }
    
  

    
      <div id="main">Dieses Element wird 800px breit sein.</div>
      <div>Dieses Element wird nicht gestylt.</div>
    
  

Merkmale:

• ID muss auf der Seite einzigartig sein
• Wird zur Stilisierung einzigartiger Elemente, wie z.B. Überschriften oder Hauptinhalte, verwendet

4.4 Gruppen-Selektoren

Gruppen-Selektoren ermöglichen es, dasselbe Regelwerk auf mehrere Elemente anzuwenden. Sie reduzieren die Anzahl des Codes und erleichtern das Management der Styles.

Syntax:

    
      selector, selector, … {
        Eigenschaft: Wert;
        Eigenschaft: Wert;
      }
    
  

Beispiel:

    
      /* Wählt alle h1-, h2- und h3-Elemente */
      h1,
      h2,
      h3 {
        font-family: Arial, sans-serif;
      }
    
  

    
      <h1>Überschrift 1</h1>
      <h2>Überschrift 2</h2>
      <h3>Überschrift 3</h3>
      <p>Dieser Text wird durch diese Regel nicht gestylt.</p>
    
  

4.5 Universelle Selektoren

Universelle Selektoren wenden Styles auf alle Elemente auf der Seite an. Sie werden durch das Sternchen (*) angezeigt und können nützlich sein, um Styles zurückzusetzen oder allgemeine Styles auf alle Elemente anzuwenden.

Syntax:

    
      * {
        Eigenschaft: Wert;
        Eigenschaft: Wert;
      }
    
  

Beispiel:

Dieser Selektor wendet Styles auf alle Elemente auf der Seite an, setzt deren Abstände zurück und stellt das Box-Model ein.

    
      <div>Absatz 1</div>
      <div>Absatz 2</div>
    
  

    
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    
  

Merkmale:

• Wird auf alle Elemente auf der Seite angewendet
• Nützlich für globale Style-Resets oder für grundlegende Styles, die auf alle Elemente angewendet werden sollen