CSS Attribut-Selektor | mediaevent.de

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 anhand der Zeichenkette https:// der Sprungadresse filtern und so herausstellen.

a [href^="https://"]:before {
	content: "➚ ";
}

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>

Attribut-Selektor und not

Wenn Elemente nur dann gewählt werden sollen, wenn sie bestimmte Attribute nicht aufweisen, greift der CSS Selector :not().

.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" … />

data-Attribute

data-Attribute sind eigene Attribute, die sich z.B. an Javascript wenden. Sie sollten einfach nur mit "data-" oder einem eigenen individuellen Namensraum beginnen – schon allein der Bindestrich trennt selbstdefinierte Attribute von regulären HTML-Attributen. Ihr Vorteil gegenüber CSS-Klassen: Sie kollidieren nicht mit CSS-Klassen aus diversen Libraries, sind robust und einfach.

Wohlverpackte Comichefte

Eine Vase, ein Buch und ein altes Stück Packpapier

Ein bißchen Naturdeko für die Fensterbank

<div data-grid="medium">
	<div data-gridbox="centered">
		<img loading="lazy" src="img/acco-books-360.webp" width="360" height="188" alt="Demo-Img">
		<p>Wohlverpackte Comichefte</p>
	</div>
	<div data-gridbox="centered">
		<img loading="lazy" src="img/acco-paper-360.webp" width="360" height="188" alt="Demo-Img">
		<p>Eine Vase, ein Buch und ein altes Stück Packpapier</p>
	</div>
	<div data-gridbox="centered">
		<img loading="lazy" src="img/acco-spices-360.webp" width="360" height="188" alt="Demo-Img">
		<p>Ein bißchen Naturdeko für die Fensterbank</p>
	</div>
</div>

data-Attribute sind nicht einfach eigene CSS-Klassen. Während CSS-Klassen im Grunde genommen nur die Werte true oder false (Klasse ist vorhanden oder nicht vorhanden) annehmen können, können data-Attributen mit Javascript Werte dynamisch zugewiesen werden.

[data-grid="medium"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:18px;
}

[data-gridbox="centered"] {
	background: ivory;
	box-shadow: 3px 3px 6px hsl(0,0%,60%);
}

Neben data-Attributen gibt es eigene selbstdefinierte HTML-Tags. Custom Elements verhalten sich wie <span>-Tags: Sie haben keine Eigenschaften und transportieren kein Formatierung. Wie data-Attribute brauchen sie einen Bindestrich im Namen. So bilden sie eine valide HTML-Syntax, die von den Browsern akzeptiert wird und die weder eine eigene DTD noch Javascript braucht.