Diese Seite demonstriert verschiedene CSS-Selektoren. Jeder Bereich zeigt einen Selektor-Typ mit konkreten Beispielen. Öffnen Sie den Quelltext (Strg+U), um die CSS-Kommentare zu lesen.
Dieser Absatz wird durch den Element-Selektor p { ... } gestylt. Alle Absätze auf der Seite teilen sich diese Grundformatierung.
Auch dieser Absatz bekommt dieselben Styles, weil der Element-Selektor alle <p>-Elemente trifft.
Dies ist ein normaler Absatz ohne besondere Klasse.
Dieser Text steht in einem Element mit class="hervorhebung". Der Klassen-Selektor .hervorhebung gibt ihm einen gelben Hintergrund und eine goldene Linie links.
In diesem Absatz ist ein wichtiges Wort hervorgehoben (Klasse .wichtig) und ein dezenter Hinweis (Klasse .dezent).
Dieser Absatz ist zentriert (Klasse .zentriert).
Die Navigation oben hat id="navigation". Der ID-Selektor #navigation gibt ihr einen grauen Hintergrund. IDs sind einmalig pro Seite und haben eine hohe Spezifität.
Die Überschrift ganz oben hat id="seitentitel" und wird durch #seitentitel extra groß dargestellt.
Der Text oben nutzt den kombinierten Selektor p.meta — nur ein <p> mit class="meta".
12. Jänner 1882 — Romanische Sprachwissenschaft
3. März 1882 — Sprachmischung und Kreolsprachen
15. Mai 1882 — Stammbaumtheorie vs. Wellentheorie
Die Karten nutzen den Nachfahren-Selektor: .karten-container .karte und den Hover-Effekt .karten-container .karte:hover. Fahren Sie mit der Maus über eine Karte!
Die folgende Liste demonstriert :first-child, :last-child und :nth-child(even):
Auch Links haben Pseudo-Klassen: Fahren Sie mit der Maus hierüber (a:hover).