CSS, HTML und Javascript mit {stil}

CSS-Selektoren: Attribut-Selektoren

CSS Attribut Selector: das Fischen nach HTML-Elementen

Immer wieder soll ein HTML-Element mit CSS-Stilen gezielt ausgewählt und geändert werden. Wenn es eine CSS-Klasse oder ein ID-Attribut gibt, ist das Ansteuern eines HTML-Tags mit CSS einfach.

Aber wie steht es mit einem Element mitten in einer Liste? Jedes dritte Element einer Liste, alle input-Tags mit type=text?

Mit CSS2 und CSS3 können HTML-Attribute als CSS-Selektoren hinzugezogen werden, so dass z.B. der Link zu einer bestimmten URL seinen eigenen CSS-Stil bekommt.

Anhand von Attributen, Werten von Attributen und selbst Teilen von Zeichenketten in HTML-Attributen lassen sich HTML-Tags selektieren. Diese Attributselektoren werden in eckigen Klammern notiert.

  • Attribut-Selektor
    Beispiel
  • 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 der Wert "Foto" 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

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 type="text/css">
<!--
   a[href^="http://"] { border-bottom: 2px dotted #759DB5}
-->
</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>