CSS, HTML und Javascript mit {stil}

CSS-Selektoren: Attribut-Selektor

CSS Attribut Selektoren wie type, alt, width, href

Attribut-Selektoren filtern HTML-Elemente nach Attributen – sogar nach Zeichenketten in Attributen oder sie finden Elemente, wenn ein Attribut mit einer bestimmten Zeichenfolge 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.

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-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 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.

Screenshot vom Rechner 
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.

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

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>