Css Selectors Cheat Sheet

Dieser Code setzt den Margin und das Padding aller Elemente auf Null. Das ist oft ein guter Ausgangspunkt für ein neues Projekt, um sicherzustellen, dass alle Browser die Seite gleich darstellen.

Kombinatoren: Selektoren kombinieren

Kombinatoren erlauben es dir, Selektoren miteinander zu kombinieren und so Elemente basierend auf ihrer Beziehung zueinander auszuwählen. Das ist wie eine Familienaufstellung für deine HTML-Elemente!

Descendant (Nachfahre) Selektor

Der Descendant Selektor wählt alle Elemente aus, die Nachfahren eines bestimmten Elements sind. Er wird mit einem Leerzeichen zwischen den Selektoren geschrieben.

    div p {
      font-style: italic;
    }
  

Dieser Code formatiert alle <p>-Elemente, die sich innerhalb eines <div>-Elements befinden, kursiv. Egal wie tief verschachtelt das <p>-Element ist, es wird formatiert!

Child (Kind) Selektor

Der Child Selektor wählt nur die Elemente aus, die direkte Kinder eines bestimmten Elements sind. Er wird mit einem Größer-als-Zeichen (>) zwischen den Selektoren geschrieben.

    ul > li {
      list-style-type: square;
    }
  

Dieser Code formatiert nur die <li>-Elemente, die direkt unter einem <ul>-Element liegen, mit einem Quadrat als Listenzeichen. <li>-Elemente, die tiefer verschachtelt sind, werden nicht beeinflusst.

Adjacent Sibling (Unmittelbar angrenzender Bruder/Schwester) Selektor

Der Adjacent Sibling Selektor wählt das Element aus, das direkt nach einem anderen Element kommt und den gleichen Elternknoten hat. Er wird mit einem Pluszeichen (+) zwischen den Selektoren geschrieben.

    h2 + p {
      margin-top: 0;
    }
  

Dieser Code entfernt den oberen Rand des <p>-Elements, das direkt nach einem <h2>-Element kommt. Denk daran: Es muss direkt danach kommen, damit die Regel angewendet wird!

General Sibling (Allgemeiner Bruder/Schwester) Selektor

Der General Sibling Selektor wählt alle Elemente aus, die nach einem anderen Element kommen und den gleichen Elternknoten haben. Er wird mit einer Tilde (~) zwischen den Selektoren geschrieben.

    h2 ~ p {
      color: green;
    }
  

Dieser Code formatiert alle <p>-Elemente, die nach einem <h2>-Element im gleichen Elternelement kommen, grün. Egal wie viele andere Elemente dazwischen liegen!

Pseudo-Klassen und Pseudo-Elemente

Pseudo-Klassen und Pseudo-Elemente sind wie Zaubertricks. Sie erlauben es dir, Elemente basierend auf ihrem Zustand oder Teilen zu formatieren, die im HTML-Code nicht explizit vorhanden sind. Das klingt kompliziert, ist aber unglaublich mächtig!

Pseudo-Klassen

Pseudo-Klassen wählen Elemente basierend auf ihrem Zustand aus, z.B. wenn die Maus darüber schwebt oder wenn ein Element ausgewählt ist. Sie beginnen immer mit einem Doppelpunkt (:).

:hover

Die :hover Pseudo-Klasse wird angewendet, wenn der Benutzer die Maus über ein Element bewegt.

    a:hover {
      color: red;
    }
  

Dieser Code ändert die Farbe von Links zu rot, wenn der Benutzer mit der Maus darüber fährt. Das ist eine gängige Technik, um Interaktivität zu signalisieren.

:active

Die :active Pseudo-Klasse wird angewendet, wenn ein Element aktiviert wird, z.B. wenn der Benutzer darauf klickt.

    button:active {
      background-color: darkgray;
    }
  

Dieser Code ändert die Hintergrundfarbe von Buttons zu dunkelgrau, während der Benutzer darauf klickt.

:focus

Die :focus Pseudo-Klasse wird angewendet, wenn ein Element den Fokus hat, z.B. wenn der Benutzer darauf klickt oder es mit der Tab-Taste auswählt.

    input:focus {
      border: 2px solid blue;
    }
  

Dieser Code gibt Eingabefeldern einen blauen Rahmen, wenn sie den Fokus haben. Das hilft Benutzern, zu erkennen, welches Feld sie gerade bearbeiten.

:first-child

Die :first-child Pseudo-Klasse wählt das erste Kindelement eines anderen Elements aus.

    ul li:first-child {
      font-weight: bold;
    }
  

Dieser Code formatiert das erste <li>-Element innerhalb einer <ul>-Liste fett.

:last-child

Die :last-child Pseudo-Klasse wählt das letzte Kindelement eines anderen Elements aus.

    ol li:last-child {
      border-bottom: none;
    }
  

Dieser Code entfernt die untere Umrandung des letzten <li>-Elements innerhalb einer <ol>-Liste.

Pseudo-Elemente

Pseudo-Elemente erlauben es dir, Teile eines Elements zu formatieren, die im HTML-Code nicht explizit als separate Elemente vorhanden sind. Sie beginnen immer mit einem doppelten Doppelpunkt (::).

::before

Das ::before Pseudo-Element fügt vor dem Inhalt eines Elements etwas ein. Oft wird es verwendet, um Icons oder dekorative Elemente hinzuzufügen.

    h1::before {
      content: "→ ";
      color: green;
    }
  

Dieser Code fügt einen grünen Pfeil vor den Inhalt jedes <h1>-Elements ein.

::after

Das ::after Pseudo-Element fügt nach dem Inhalt eines Elements etwas ein. Ähnlich wie ::before wird es oft für dekorative Zwecke verwendet.

    a::after {
      content: " ↗";
    }
  

Dieser Code fügt einen Pfeil nach oben rechts nach jedem Link ein.

::first-letter

Das ::first-letter Pseudo-Element wählt den ersten Buchstaben eines Elements aus.

    p::first-letter {
      font-size: 200%;
      color: red;
    }
  

Dieser Code macht den ersten Buchstaben jedes <p>-Elements doppelt so groß und rot.

::first-line

Das ::first-line Pseudo-Element wählt die erste Zeile eines Elements aus.

    p::first-line {
      font-weight: bold;
    }
  

Dieser Code formatiert die erste Zeile jedes <p>-Elements fett.

Attribut Selektoren

Attribut Selektoren wählen Elemente basierend auf dem Vorhandensein oder dem Wert eines bestimmten HTML-Attributs aus.

[attribute]

Dieser Selektor wählt alle Elemente aus, die das angegebene Attribut haben, egal welchen Wert es hat.

    a[title] {
      color: green;
    }
  

Dieser Code formatiert alle Links, die ein title-Attribut haben, grün.

[attribute="value"]

Dieser Selektor wählt alle Elemente aus, die das angegebene Attribut mit dem genauen angegebenen Wert haben.

    input[type="text"] {
      border: 1px solid gray;
    }
  

Dieser Code gibt allen <input>-Elementen mit dem Attribut type und dem Wert text eine graue Umrandung.

[attribute~="value"]

Dieser Selektor wählt alle Elemente aus, deren Attribut eine Liste von Wörtern enthält, von denen eines genau dem angegebenen Wert entspricht. Die Werte müssen durch Leerzeichen getrennt sein.

    img[alt~="flower"] {
      border: 2px solid purple;
    }
  

Dieser Code gibt allen <img>-Elementen, deren alt-Attribut das Wort "flower" enthält (z.B. "red flower", "flower garden"), eine lilafarbene Umrandung.

[attribute|="value"]

Dieser Selektor wählt alle Elemente aus, deren Attributwert genau dem angegebenen Wert entspricht oder mit diesem Wert beginnt, gefolgt von einem Bindestrich (-).

    html[lang|="en"] {
      font-size: 16px;
    }
  

Dieser Code setzt die Schriftgröße für alle <html>-Elemente mit dem lang-Attribut auf en oder en-US auf 16px.

[attribute^="value"]

Dieser Selektor wählt alle Elemente aus, deren Attributwert mit dem angegebenen Wert beginnt.

    a[href^="https"] {
      font-weight: bold;
    }
  

Dieser Code formatiert alle Links, deren href-Attribut mit https beginnt, fett. Das ist nützlich, um externe Links hervorzuheben.

[attribute$="value"]

Dieser Selektor wählt alle Elemente aus, deren Attributwert mit dem angegebenen Wert endet.

    img[src$=".jpg"] {
      border: 1px solid black;
    }
  

Dieser Code gibt allen <img>-Elementen, deren src-Attribut mit .jpg endet, eine schwarze Umrandung.

Dieser Code formatiert alle <input>-Elemente, deren placeholder-Attribut das Wort "Name" enthält, kursiv.

Spezifität: Wer gewinnt den Formatierungskampf?

Wenn mehrere CSS-Regeln auf dasselbe Element zutreffen, gewinnt die Regel mit der höheren Spezifität. Spezifität ist wie ein Punktesystem, das bestimmt, welche Regel Vorrang hat. Hier ist die Reihenfolge von niedrigster zu höchster Spezifität: