Effizient formatieren

Teil 3: 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.

CSS-Selektoren

© Archiv

Klassen-Selektoren zielen auf beliebige Elemente, die der betreffenden Klasse angehören.

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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".