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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…