6.1 Arten von Attributselektoren
Attributselektoren in CSS erlauben es, Elemente basierend auf dem Vorhandensein von Attributen, deren Werten oder Teilen der Werte auszuwählen. Sie bieten flexible und leistungsstarke Möglichkeiten zur Stilierung von HTML-Elementen und sind besonders nützlich für die Arbeit mit dynamischen Inhalten und interaktiven Webseiten.
Arten von Attributselektoren
- Attributselektor (Attribute Selector)
- Attributselektor mit Wert (Attribute Selector with Value)
- Attributselektor mit Präfix (Attribute Selector with Prefix)
- Attributselektor mit Suffix (Attribute Selector with Suffix)
- Attributselektor mit Teilstring (Attribute Selector with Substring)
- Attributselektor mit Leerzeichentrennung (Attribute Selector with Whitespace)
- Attributselektor mit Bindestrichtrennung (Attribute Selector with Hyphen)
6.2 Attributselektor
Der Attributselektor wählt Elemente aus, die das angegebene Attribut besitzen, unabhängig von seinem Wert.
Syntax:
[attribut] {
eigenschaft: wert;
eigenschaft: wert;
}
Beispiel:
/* Wählt alle Elemente aus, die das Attribut title haben */
[title] {
color: blue;
}
<p title="Das ist ein Titel">Dieser Text wird blau sein.</p>
<p>Dieser Text wird nicht blau sein.</p>
6.3 Attributselektor mit Wert
Der Attributselektor mit Wert wählt Elemente aus, deren Attribute den angegebenen Wert haben.
Syntax:
[attribut="wert"] {
eigenschaft: wert;
eigenschaft: wert;
}
Beispiel:
/* Wählt alle Elemente aus, deren Attribut title den Wert "Beispiel" hat */
[title="Beispiel"] {
color: green;
}
<p title="Beispiel">Dieser Text wird grün sein.</p>
<p title="Anderes Beispiel">Dieser Text wird nicht grün sein.</p>
6.4 Attributselektor mit Präfix
Der Attributselektor mit Präfix wählt Elemente aus, deren Attribute mit dem angegebenen Wert beginnen.
Syntax:
[attribut^="wert"] {
eigenschaft: wert;
eigenschaft: wert;
}
Beispiel:
/* Wählt alle Elemente aus, deren Attribut title mit "Anfang" beginnt */
[title^="Anfang"] {
color: red;
}
<p title="Anfang des Textes">Dieser Text wird rot sein.</p>
<p title="Nicht der Anfang">Dieser Text wird nicht rot sein.</p>
6.5 Attributselektor mit Suffix
Der Attributselektor mit Suffix wählt Elemente aus, deren Attribute mit dem angegebenen Wert enden.
Syntax:
[attribut$="wert"] {
eigenschaft: wert;
eigenschaft: wert;
}
Beispiel:
/* Wählt alle Elemente aus, deren Attribut title mit "Ende" endet */
[title$="Ende"] {
color: orange;
}
<p title="Das ist das Ende">Dieser Text wird orange sein.</p>
<p title="Das ist der Anfang">Dieser Text wird nicht orange sein.</p>
6.6 Attributselektor mit Teilstring
Der Attributselektor mit Teilstring wählt Elemente aus, deren Attribute den angegebenen Wert enthalten.
Syntax:
[attribut*="wert"] {
eigenschaft: wert;
eigenschaft: wert;
}
Beispiel:
/* Wählt alle Elemente aus, deren Attribut title "Mitte" enthält */
[title*="Mitte"] {
color: purple;
}
<p title="Das ist die Mitte des Textes">Dieser Text wird violett sein.</p>
<p title="Keine Mitte hier">Dieser Text wird nicht violett sein.</p>
6.7 Attributselektor mit Leerzeichentrennung
Der Attributselektor mit Leerzeichentrennung wählt Elemente aus, deren Attribut ein oder mehrere durch Leerzeichen getrennte Werte enthält. Dies ist nützlich, um Elemente mit bestimmten Klassen oder Rollen auszuwählen.
Syntax:
[attribut~="wert"] {
eigenschaft: wert;
eigenschaft: wert;
}
Beispiel:
/* Wählt alle Elemente aus, deren Attribut class "highlight" in der Klassenliste enthält */
[class~="highlight"] {
background-color: yellow;
}
<p class="highlight special">Dieser Text wird mit gelbem Hintergrund sein.</p>
<p class="special highlight">Dieser Text wird auch mit gelbem Hintergrund sein.</p>
<p class="special">Dieser Text wird keinen gelben Hintergrund haben.</p>
6.8 Attributselektor mit Bindestrichtrennung
Der Attributselektor mit Bindestrichtrennung wählt Elemente aus, deren Attribut den angegebenen Wert enthält oder mit dem angegebenen Wert beginnt, gefolgt von einem Bindestrich.
Syntax:
[attribut|="wert"] {
eigenschaft: wert;
eigenschaft: wert;
}
Beispiel:
p[lang|="ru"] {
font-style: italic;
}
<p lang="ru">Dieser Text wird kursiv sein.</p>
<p lang="ru-RU">Dieser Text wird auch kursiv sein.</p>
<p lang="en">This text will not be italicized.</p>
GO TO FULL VERSION