Teil 3: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign

1. CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
2. Teil 2: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
3. Teil 3: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
4. Teil 4: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
5. Teil 5: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
6. Teil 6: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
7. Teil 7: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign

auf alle Elemente zu, die über das href-Attribut verfügen (der Universalselektor * wird implizit angenommen).

Attribut-Selektoren lassen sich auch sowohl auf bestimmte Elementtypen als auch auf solche Elemente einschränken, die den vorgegebenen Wert des betreffenden Attributs aufweisen. So trifft zum Beispiel die folgende Regel:

input[type="submit"] { ... }

auf input-Elemente zu, die über das type-Attribut mit dem Wert submit verfügen.

Mit dem |= Operator zielt ein Attribut-Selektor auf alle Elemente, die über das gewünschte Attribut verfügen, dessen Wert mit einer vorgegebenen Zeichenkette beginnt, auf die ein Bindestrich und weitere Zeichen folgen können.

*[lang|="en"] { ... }

trifft auf alle Elemente zu, deren lang-Attribut auf einen Wert gesetzt wurde, der mit der Kennung für deutsche Sprache beginnt: de. Der verwendete Attribut-Selektor berücksichtigt de-DE, de-CH und de-AT mit, erfordert jedoch eine explizite Deklaration der verwendeten Sprache.

© Archiv

TIPP: Da die Sprache, die ein HTML-Element verwendet, nicht explizit deklariert, sondern vererbt werden kann, kann hierbei auch eine Pseudoklasse zum Einsatz kommen:

:lang(de) { ... }

Mithilfe eines Attribut-Selektors lassen sich auch Elemente anhand eines Attributes selektieren, dessen Wert mehrere Worte beinhaltet, von denen nur eines auf den Selektor zutrifft.

[class~="hinweis"]
{ ... }

selektiert beispielsweise alle Elemente mit dem class-Attribut, dessen Wert unter anderem das Wort hinweis beinhaltet. Die zugehörigen Deklarationen werden also unter anderem angewendet auf:

<p class="hinweis">Inhalt</p><strong class="wichtiger
hinweis">Inhalt</strong><div class="hinweis warnung">Inhalt</
div>

Die betreffende CSS-Regel wirkt sich jedoch auf die folgenden Elemente nicht aus:

<p class="top-hinweis"></p><ul class="hinweise"></ul>

Klassen- und Attribut-Selektoren lassen sich auch miteinander kombinieren.

div.neu.info { ... }

trifft dementsprechend auf alle div-Elemente zu, deren Klassenattribut sowohl neu als auch info beinhaltet.

Neue Attribut-Selektoren in CSS3

CSS3 führt drei neue Varianten von Attribut-Selektoren ein, die in allen modernen Browsern und im IE ab Version 7 schon jetzt funktionieren. Mithilfe des ^= Operators kann man mit einem Attribut-Selektor gezielt solche Elemente erfassen, bei denen der Wert des gewünschten Attributs mit einer bestimmten Zeichenkette beginnt.

a[href^="http:"] { ... }

zeigt auf alle <a>-Elemente mit dem href-Attribut, dessen Wert mit http: beginnt. Nach demselben Konzept kann man mithilfe des $= Operators alle Elemente selektieren, bei denen der Wert des gewünschten Attributs mit einer bestimmten Zeichenkette endet, etwa:

img[src$=".jpg"]
{ ... }

Schließlich kann man mit dem *= Operator alle Elemente erfassen, bei denen der Wert des gewünschten Attributs eine bestimmte Zeichenkette beinhaltet:

a[href*="beispiel.de"] { ... }

trifft auf alle <a>-Elemente zu, deren href-Attribut beispiel.de beinhaltet.