Webdesign mit (X)HTML und CSS

Ein Kurs für Einsteiger

Kombinierte Selektoren

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.