Täglich Shaarli
October 25, 2025
Ich mache nur gelegentlich etwas mit HTML. Und ebenso gelegentlich habe ich mit CSS zu tun. Weil ich aber die CSS-Selektoren aber alle paar Monate mal brauche und jedes Mal nachgucken muss, gibt es hier nun meine Gedächtnisstütze.
| Selektor | Beispiel-HTML | CSS | Erklärung |
|---|---|---|---|
| Element-Selektor | <p>Textabsatz</p> |
p { color: blue; } |
Wählt alle HTML-Elemente dieses Typs aus. In diesem Beispiel betrifft die Regel alle <p>-Tags. |
| Klassen-Selektor | <div class="highlight">Inhalt</div> |
.highlight { background-color: yellow; } |
Wählt alle Elemente mit dieser Klasse aus – unabhängig vom Elementtyp. |
| Element-Klassen-Selektor | <p class="info">Hinweistext</p> |
p.info { font-style: italic; } |
Wendet den Stil nur auf <p>-Tags mit der Klasse info an. Andere Elemente mit dieser Klasse werden nicht betroffen. |
| ID-Selektor | <h1 id="titel">Seitentitel</h1> |
#titel { text-transform: uppercase; } |
Spricht ein bestimmtes Element mit dieser ID an. IDs dürfen nur einmal pro Seite vorkommen. |
| Mehrere Selektoren | <p>Text</p><br><a class="link">Verweis</a> |
p, a.link { color: green; } |
Mehrere Selektoren werden durch ein Komma getrennt. Dieselbe Regel gilt somit für beide: alle <p>-Elemente und alle <a> mit der Klasse link. |
| Kombination von Selektoren | <div class="container"><br> <p>Absatz im Container</p><br></div> |
div.container p { font-weight: bold; } |
Diese Regel gilt nur für <p>-Tags, die sich innerhalb eines <div> mit der Klasse container befinden. Andere <p>-Elemente bleiben unverändert. |