CSS, HTML und Javascript mit {stil}

CSS-Selektoren: Attribut-Selektor

Attribut Selektoren: wie type, alt, width, href und ihre Werten

Attribut-Selektoren filtern HTML-Elemente nach Attributen – sogar nach Zeichenketten in Attributen oder sie finden Elemente, wenn ein Attribut mit einem bestimmten String beginnt – z.B. a[href^="https"] – alle Links, die mit https beginnen.

Mit CSS2 und CSS3 können HTML-Attribute als Selektoren hinzugezogen werden, so dass z.B. der Link zu einer bestimmten URL seinen eigenen Stil bekommt, externe Links eine andere Farbe oder ein besonderes Merkmal.

Anhand von Attributen, Werten von Attributen und selbst Teilen von Zeichenketten in HTML-Attributen lassen sich HTML-Tags selektieren. Selektoren auf der Basis von Attributen werden in eckigen Klammern notiert.

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 mit Teilstring eines Werts

Wenn ein Attribut eine Zeichenkette enthält, reicht schon ein eindeutiger Anfang der Zeichenkette, um das HTML-Element anzuwählen.

Ein blauer Vogel Vogel, orange grüner Vogel 
<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

Französische Überschrift

Dänische Überschrift

<style type="text/css" title="text/css">
   h4[lang|="de"] { color: plum}
   h4[lang|="fr"] { color: green}
   h4[lang|="dk"] { color: salmon}
</style>
… 

<h4 lang="de">Deutsche Überschrift</h4>
<h4 lang="fr">Französische Überschrift</h4>
<h4 lang="dk">Dänische Überschrift</h4>
CSS attribute selector