Selektoren in CSS

Selektoren legen fest, auf welche HTML-Elemente eine CSS-Regel angewendet wird. Es gibt verschiedene Typen mit unterschiedlicher Spezifität:

Namensvergabe für Klassen und IDs: keine Leerzeichen, keine Sonderzeichen, keine reservierten Schlüsselwörter. IDs müssen im gesamten Dokument eindeutig sein.

/* Universal-Selektor: alle Elemente */
*               { font-family: Helvetica, Arial, sans-serif; }

/* Typ-Selektor: Tag-Name */
body            { background: #9acfea; }

/* Pseudoklasse: Zustand des Elements */
a:hover         { background: #000; color: #fff; }
input:focus     { border: 3px solid #ff0; }

/* Pseudoelement: Teile des Elements */
main p::first-letter { font-size: 3em; color: #f00; }

/* Klassen-Selektor: class="gelb" im HTML */
.gelb           { color: #ffff00; }

/* ID-Selektor: id="unique" im HTML (nur 1x pro Seite!) */
#unique         { font-family: Courier, monospace; }

/* Attribut-Selektor: Elemente mit bestimmtem Attributwert */
[type="text"]   { font-size: 16px; }

Alle obigen Regeln sind auf dieser Seite aktiv. Beachte: Im Inhaltsbereich beginnt jeder Absatz mit einem großen roten Anfangsbuchstaben (::first-letter), der Link ändert auf Hover die Farbe etc.

Überschrift H2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. | mehr

Überschrift H3 mit class="gelb"

Und weil es so schön ist kommt hier direkt noch mehr Text, sogar mit einem hervorgehobenen Wort.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet. | mehr

Absatz mit class="gelb" und id="unique".
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. | mehr

Überschrift H3

Lorem ipsum dolor sit amet. | mehr

Absatz mit class="gelb". | mehr