Wer viel mit CSS ar­bei­tet und („krasse“) ta­bel­len­freie Web-Layouts er­stellt, der wird nicht drum­herum kom­men, sich mit den CSS-Selektoren zu be­schäf­ti­gen.
In­zwi­schen bin ich et­was XPATH–ver­wöhnt was Se­lek­to­ren an­geht, denn mit self, child, parent, descendant, descendant-or-self, ancestor, ancestor-or-self, preceding, following, preceding-sibling und following-sibling hat man dort alle, und da­mit meine ich wirk­lich ALLE, Mög­lich­kei­ten im XML-(Struktur-)Baum zu na­vi­gie­ren und Ele­mente zu selektieren.

Die Mög­lich­kei­ten in CSS sind da­ge­gen eher be­schei­den. Hier eine kurze Über­sicht über die wich­tigs­ten CSS-Selektoren:

• klasse klasse2
  Se­lek­tiert klasse2 die sich *ir­gendwo* in­ner­halb von klasse be­fin­det.
  Beispiel:

  <div class="klasse">
    <span class="klasse2">Dieser SPAN wird selektiert.
      <p class="klasse2">Dieser Absatz wird selektiert.</p>
    </span>
  </div>

• klasse>klasse2
  Se­lek­tiert klasse2, wenn sich diese ge­nau EINE Ebene un­ter­halb von klasse be­fin­det.
  Beispiel:

  <div class="klasse">
    <span class="klasse2">Dieser SPAN wird selektiert!
      <p class="klasse2">Dieser Absatz wird NICHT selektiert.</p>
    </span>
  </div>

• klasse*klasse2
  Se­lek­tiert klasse2, wenn sich diese ge­nau ZWEI Ebe­nen un­ter­halb von klasse be­fin­det.
  Beispiel:

  <div class="klasse">
    <span class="klasse2">Dieser SPAN wird NICHT selektiert.
      <p class="klasse2">Dieser Absatz wird selektiert.</p>
    </span>
  </div>

• klasse+klasse2
  Se­lek­tiert klasse2, wenn sich diese di­rekt NACH klasse be­fin­det.
  Beispiel:

  <div class="klasse">
    <span class="klasse2">Dieser SPAN wird NICHT selektiert.</span>
  </div>
  <div class="klasse2">
    Dafür wird dieses DIV selektiert.
  </div>

Was ich mir für CSS wirk­lich wün­sche, ist ein parent-Selektor. Der würde viel Ar­beit ab­neh­men! Ist aber in CSS3 lei­der nicht vor­ge­se­hen und bis CSS4 raus­kommt könn­ten noch ein paar Jähr­chen ver­ge­hen. Schade…

CSS 4 You bie­tet auf zwei Sei­ten noch wei­tere In­fos zum Um­gang mit Selektoren.