Webdesign mit (X)HTML und CSS

Durch geschickte Kombination von verschiedenen Arten von Selektoren kann (nahezu) jedes Element im Dokument gezielt angesprochen werden. 

Kombination aus Typ- und  Klassen-/Id-Selektoren

Typ-, id- und class-Selektoren können kombiniert werden.

1. p.intro {
2. color:blue;
3. }

Alle p-Elemente, denen die Klasse intro zugewiesen wurde, erhalten eine blaue Vordergrundfarbe.

1. div#head {
2. background-color:yellow;
3. }

Das div-Element mit der id="head" erhält eine gelbe Hintergrundfarbe.

Kombination mit verwandschaftlichen Selektoren 

1. div#content p {
2. color:blue;
3. }

Alle Textabsätze, die Nachfahren eines div-Elements mit id="content" sind, erhalten eine blaue Textfarbe. 

Kombinationen und mehrere Selektoren

1. div#content h2 + p,
2. div#content h3 + p {
3. color:red;
4. }

Alle Textabsätze, die sich innerhalb eines div-Elements mit id="content" befinden und direkt auf eine Überschrift zweiter oder dritter Ordnung folgen, erhalten eine rote Textfarbe. Das Komma trennt die beiden unterschiedlichen Selektoren.