Attribute in CSS nutzen, um HTML-Elemente direkt anzusprechen
Freitag, 27.12.2019 Know-How
In unserer Rubrik Friday for feature geht es heute um das World Wide Web (WWW), Hypertext Markup Language (HTML) und im Besonderen um Cascading Style Sheets (CSS).
HTML-Elemente können in CSS unter Nutzung von Attributen, Werten von Attributen und selbst Teilen von Zeichenketten in HTML-Attributen angesprochen werden. Selektoren auf der Basis von Attributen werden in eckigen Klammern notiert.
Im Folgenden zeigen wir anhand von Attribut-Selektoren die Einsatzmöglichkeiten von Attributen in CSS und bringen Ihnen diese durch dazugehörigen Beispiele näher:
E[attr]
td[width] { background-color: red }
Alle E-Elemente, in unserem Fall "td" und somit alle Zelle(n) einer Tabelle, deren "width"-Attribut gesetzt ist – gleich, mit welchem Wert
E[attr="xyz"]
input[type="number"] { background-color: red; }
Alle E-Elemente, deren "type"-Attribut exakt den Wert "number" aufweist
E[attr~="xyz"]
img[alt~="AltTitle"] { border: 1px solid red; }
Alle E-Elemente, in unserem Fall "img" und somit alle Bilder, in deren alt-Attribut genau das Wort "AltTitle", getrennt vom Rest durch Leerzeichen, enthalten ist
div[class~="col"] { background-color: red; }
Alle div-Elemente, die die Klasse "col" enthalten
E[attr*="xyz"]
img[src~="thumb"] { border: 1px solid red; }
Alle img-Elemente, in unserem Fall "img" und somit alle Bilder, in deren src-Attribut die Zeichenfolge thumb enthalten ist
E[lang|="xyz"]
h1[class|="col-sm-3"] { color: red; }
Jedes E-Element, in unserem Fall "h1" und somit alle H1-Überschriften, dessen "class"-Attribut einen Bindestrich-geteilten Wert aufweist, der (von links) mit "col" beginnt.
E[attr^="xyz"]
a[href^="http"] { border-bottom: 1px solid red; }
Alle E-Elemente, in unserem Fall "a" und somit alle Verlinkungen bzw. Hyperlinks, deren "href"-Attribut mit "http" beginnt
E[attr$="xyz"]
a[href$=".html"] { font-style: italic; text-decoration: underline; }
Alle E-Elemente, in unserem Fall "a" und somit alle Verlinkungen bzw. Hyperlinks, deren "href"-Attribut mit ".html" endet
E[attr*="xyz"]
a[href*=".html"] { font-style: italic; text-decoration: underline; }
Alle E-Elemente, in unserem Fall "a" und somit alle Verlinkungen bzw. Hyperlinks, deren "href"-Attribut die Zeichenkette ".html" enthält
Viel Spaß beim Ausprobieren.
Ihr Support-Team der ISN GmbH