Hack 6: Attribut-Selektor

Die Top 10 CSS-Hacks

Attribute, darunter vor allem das id-Attribut, wurden schon immer als Hack verwendet. Der Netscape Navigator 4.x versteht beispielsweise IDs nicht, wenn sie direkt einem bestimmten Tag zugeordnet sind:


div#box {

font-size:1.2em;

color: red;

}


Das ist neben der Angabe einer bestimmten @media-Direktive und den bei der Hack 1 erwähnten Möglichkeiten, eigene Netscape 4.x-CSS-Varianten zu laden, eine der praktischsten Alternativen für den alten Kämpen.

In etwas modernerer Variante sind die Attribut-Selektoren auch anders verwendbar. Und zwar gibt es (echte) Attributselektoren, die auf ein HTML-Attribut zugreifen. Möglich ist es damit zum Beispiel, auf das id-Attribut zuzugreifen:


div[id] {

font-size:1.2em;

color: red;

}


Das geht wiederum nicht im Internet Explorer bis Version 6 und im Netscape Navigator 4.x. Wenn Sie diese Zugriffsart nun mit dem exakten Zugriff auf eine bestimmte ID verbinden, erhalten Sie einen normalen ID-Zugriff:


div[id="box"] {

font-size:1.2em;

color: red;

}


Im Gegensatz zur allgemeinen Variante wird nur der Opera 6 zusätzlich ausgeschlossen, da er in dieser Version nur einfache Attributtests ohne Wertzuweisung kennt.