Tim Tepaße: Selektoren und Pseudoklassen kombinieren

Beitrag lesen

Hallo,

Nun habe ich einproblem mit der Pseudoklasse :hover, auf der Seite zu welcher gelinkt wird wird nur beschrieben wie man den hover effekt bei Textlinks einsetzt, jedoch nicht wie man das Bild ausblended damit das Hintergrundbild, welches wie im FAQ beschrieben als Hintergrund des Tabellenfeldes eingefügt worden ist.

Du brauchst im wesentlichen zwei CSS-Regeln: eine die für Tabellenzellen wirksam wird, eine die für Tabellenzellen wirkt, über denen der Mauszeiger schwebt. Die erste ist einfach:

~~~css td {
    background-image:url(bild-a.png);
  }

  
Der Element-Selektor „td“ wirkt auf alle Tabellenzellen. Du willst nun eine speziellere Regel haben, die nur auf Tabellenzellen wirksam wird, die gerade den Status Hover haben. Dass Du dazu die Pseudoklasse „:hover“ nutzten kannst, weisst Du ja schon. Und hier geschieht das einfach wie bei den Textlinks: Man kombiniert Element-Selektor und Pseudoklasse einfach dadurch, dass man sie ohne Leerzeichen aneinander schreibt:  
  
  ~~~css
td:hover {  
    background-image:url(bild-b.png);  
  }

Und schon hast Du eine unterschiedliche Regel, in die Du reinschreiben kannst was Du willst, eben auch ein anderes Hintergrundbild.

Das Prinzip „Selektoren spezifischer machen durch Kombinieren mit anderen Selektoren“ gilt praktisch bei allem:

• Element-Selektor für <h1> kombiniert mit Klassen-Selektor (.klasse): h1.buchtitel
• Element-Selektor für <a> kombiniert mit Attribut-Selektor ([attribut]): a[href]
• Element-Selektor für <img>, kombiniert mit ID-Selektor: img#logo
• Universal-Selektor, kombiniert mit Pseudo-Klasse :target, die auf Elemente zeigt, die per Anker angesprungen sind: *:target

Und man kann dieses Kombinieren beliebig lang machen:

input[type=text]#vorname:lang(de):focus selektiert das Input-Element, das ein Texteingabefeld ist, die ID „vorname“ hat, als Sprache deutsch und dies auch nur, wenn es gerade ausgewählt ist. Ein konstruiertes Beispiel, ja.

Aber dieses Aufbauen von simplen Selektoren (und das spätere Kombinieren von solch simplen Selektoren zu komplexen Selektoren [Das sind z.B. der Nachfahren-Selektor (ul#navigationsliste > li.abschnitt)]) ist eines der wesentlichen Dinge, die man an CSS verstanden haben sollte, auch wenn es hier recht theoretisch klingt. Man braucht es immer wieder und nur dieses lässt einen recht effizient werden, so dass man nicht den HTML-Quelltext aufblähen muss.

Tim