CSS für Elemente mit bestimmten Attributen
CSS wählt HTML-Elemente anhand von Attributen, Werten von Attributen und selbst Teilen von Zeichenketten in HTML-Attributen aus. Selektoren auf der Basis von Attributen werden in eckigen Klammern notiert.
-
Attribut-SelektorBeispiel
-
E[attr]
td[width] { background-color: red }
Alle E-Elemente, deren "width"-Attribut gesetzt ist – gleich, mit welchem Wert -
E[attr="xyz"]
input[type="password"] { background-color: red }
Alle E-Elemente, deren "type"-Attribut exakt den Wert "password" aufweist -
E[attr~="xyz"]
img[alt~="Foto"] { float: right }
Alle E-Elemente, in deren alt-Attribut genau das Wort "Foto", getrennt vom Rest durch Leerzeichen, enthalten ist
div[class~="screen"] { width: 75% }
Alle div-Elemente, die die Klasse "screen" enthalten -
E[attr*="xyz"]
img[src~="assets"] { border: 2px solid blue }
Alle img-Elemente, in deren src-Attribut die Zeichenfolge assets enthalten ist -
E[lang|="xyz"]
h1[lang|="de-DE"] { color: yellow }
Jedes E-Element, dessen "lang"-Attribut einen Bindestrich-geteilten Wert aufweist, der (von links) mit "xyz" beginnt. -
E[attr^="xyz"]
a[href^="http"] { border-bottom: 2px solid red }
Alle E-Elemente, deren "href"-Attribut mit "http" beginnt -
E[attr$="xyz"]
a[href$=".php"] { font-family: courier}
Alle E-Elemente, deren "href"-Attribut mit ".php" endet -
E[attr*="xyz"]
a[href*=".php"] { font-family: courier}
Alle E-Elemente, deren "href"-Attribut die Zeichenkette ".php" enthält
Attribut-Selektoren wirken nicht nur auf CSS, sondern filtern mit querySelector und querySelectorAll Elemente mit Javascript.
Groß- und Kleinschreibung bei Attribut-Selektoren
Wenn der Wert eines Attributs case-sensitiv ist, ist auch der Attribut-Selektor case-sensitiv. Werte von id- und class-Attributen sind also case-sensitiv, während die Werte von lang- und type-Attributen nicht case-sensitiv sind.
Attribut-Selektor beginnt mit einem Wert
Ein CSS Attribut-Selektor kann einen externen Link durch die Zeichenkette http:// oder https:// oder // der Sprungadresse filtern.
<style> a[href^="http://"] { border-bottom: 2px dotted red} a[href^="https://"] { border-bottom: 2px dotted green} </style>
Attribut-Selektor und not
Wenn Elemente nur dann gewählt werden sollen, wenn sie bestimmte Attribute nicht aufweisen:
.entry .entry-content > p:not([class^="wp"]), .entry .entry-content > ul:not([class^="wp"]), .entry .entry-content > ol:not([class^="wp"]) { max-width: 52em; }
Alle p, ul und ol-Elemente direkt unterhalb von .entry .entry-content, deren Klassen-Attribut nicht mit "wp" anfängt.
Mehrere Attribute als Bedingung
Wenn mehr als ein HTML-Attribut in die Bedingung aufgenommen werden soll, werden die Bedingungen nacheinander ins CSS geschrieben.

img[alt*="Screenshot"][src*="bike"] { border: 8px solid wheat; }
Attribut-Selektor mit Teilstring eines Werts
Wenn ein Attribut eine Zeichenkette enthält, reicht schon ein eindeutiger Anfang der Zeichenkette, um das HTML-Element anzuwählen.
<style type="text/css"> img[alt*="blau"] { border: 4px solid blue} img[alt*="or"] { border: 4px solid orange} img[alt*="ün"] { border: 4px solid green} </style>
<img src="blue-bird.svg" alt="Ein blauer Vogel" … /> <img src="orange-bird.svg" alt="Vogel, orange" … /> <img src="green-bird.svg" alt="grüner Vogel" … />
Attribut-Selektor | Ende der Zeichenkette
Genauso wie oben, aber jetzt filtert das Ende der Zeichenkette in einem HTML-Attribut das HTML-Tag.
Deutsche Überschrift
titre
overskrift
<style type="text/css" title="text/css"> h4[lang|="de"] { color: plum} h4[lang|="fr"] { color: green} h4[lang|="da"] { color: salmon} </style> … <h4 lang="de">Deutsche Überschrift</h4> <h4 lang="fr">titre</h4> <h4 lang="da">overskrift</h4>