Attributselektoren

Mit Attribut-Selektoren in CSS wählst du HTML-Elemente anhand ihrer Attribute oder Attributwerte aus.

1element[attribut] {
2    /* CSS-Regeln */
3}

Element mit bestimmtem Attribut

Alle Input-Elemente mit dem Attribut type werden angesprochen.

1<input type="text"><br>
2<input type="password">

1input[type] {
2    border: 2px solid blue;
3}

Exakter Attributwert (=)

Alle Input-Elemente mit type="password" werden angesprochen. type="text" wird nicht angesprochen.

1<input type="text"><br>
2<input type="password">

1input[type="password"] {
2    background-color: lightyellow;
3}

Wert enthält ein bestimmtes Wort (~=)

Mit [class~="highlight"] sprichst du Elemente an, bei denen das Attribut class das einzelne Wort "highlight" enthält.

1<p class="text highlight">Hallo</p>
2<p class="highlight">Welt</p>

1[class~="highlight"] {
2    color: orange;
3}

Wert beginnt mit einem Wort oder Wort-Teil (|=)

Mit [lang|="de"] werden Elemente angesprochen, deren Wert genau "de" ist oder mit "de-" beginnt.

1<p lang="de">Deutsch</p>
2<p lang="de-CH">Schweizerdeutsch</p>
3<p lang="en">Englisch</p>

1[lang|="de"] {
2    color: green;
3}

Wert beginnt mit bestimmtem Text (^=)

Mit ^= werden Elemente angesprochen, deren Attributwert mit einem bestimmten Text beginnt.

1<a href="https://example.com">Externer Link</a><br>
2<a href="/kontakt">Interner Link</a>

1a[href^="https"] {
2    color: red;
3}

Wert endet mit bestimmtem Text ($=)

Mit $= werden Elemente angesprochen, deren Attributwert mit einem bestimmten Text endet.

1<a href="bild.jpg">JPG Bild</a><br>
2<a href="dokument.pdf">PDF Dokument</a>

1a[href$=".pdf"] {
2    font-weight: bold;
3}

Wert enthält bestimmten Text (*=)

Mit *= werden Elemente angesprochen, deren Attributwert einen bestimmten Text enthält.

1<a href="/produkte/schuhe">Schuhe</a><br>
2<a href="/kontakt">Kontakt</a>

1a[href*="produkte"] {
2    background-color: lightblue;
3}

Groß- und Kleinschreibung ignorieren (i)

Mit dem Zusatz i wird beim Vergleich die Groß- und Kleinschreibung ignoriert.

1<input type="Email"><br>
2<input type="text">

1input[type="email" i] {
2    border: 2px solid purple;
3}