CSS - Attributselektoren
Gestalten Sie HTML-Elemente mit bestimmten Attributen
Es ist möglich, HTML-Elemente mit bestimmten Attributen oder Attributwerten zu formatieren.
CSS [Attribut] Selektor
Der [attribute]Selektor wird verwendet, um Elemente mit einem bestimmten Attribut auszuwählen.
Das folgende Beispiel wählt alle <a>-Elemente mit einem Zielattribut aus:
Beispiel
a[target] {
background-color: yellow;
}
CSS [attribute="value"]-Selektor
Der [attribute="value"]Selektor wird verwendet, um Elemente mit einem bestimmten Attribut und Wert auszuwählen.
Das folgende Beispiel wählt alle <a>-Elemente mit einem target="_blank"-Attribut aus:
Beispiel
a[target="_blank"] {
background-color: yellow;
}
CSS [attribute~="value"] Selektor
Der [attribute~="value"]Selektor wird verwendet, um Elemente mit einem Attributwert auszuwählen, der ein bestimmtes Wort enthält.
Das folgende Beispiel wählt alle Elemente mit einem Titelattribut aus, das eine durch Leerzeichen getrennte Liste von Wörtern enthält, von denen eines "Blume" ist:
Beispiel
[title~="flower"] {
border: 5px solid yellow;
}
Das obige Beispiel stimmt mit Elementen mit title="flower", title="summer flower" und title="flower new" überein, aber nicht mit title="my-flower" oder title="flowers".
CSS [attribute|="value"] Selektor
Der [attribute|="value"]Selektor wird verwendet, um Elemente mit dem angegebenen Attribut auszuwählen, deren Wert genau der angegebene Wert oder der angegebene Wert gefolgt von einem Bindestrich (-) sein kann.
Hinweis: Der Wert muss ein ganzes Wort sein, entweder allein, wie class="top", oder gefolgt von einem Bindestrich ( - ), wie class="top-text".
Beispiel
[class|="top"] {
background: yellow;
}
CSS [attribute^="value"] Selektor
Der [attribute^="value"]Selektor wird verwendet, um Elemente mit dem angegebenen Attribut auszuwählen, deren Wert mit dem angegebenen Wert beginnt.
Das folgende Beispiel wählt alle Elemente mit einem class-Attributwert aus, der mit „top“ beginnt:
Hinweis: Der Wert muss kein ganzes Wort sein!
Beispiel
[class^="top"] {
background: yellow;
}
CSS [attribute$="value"]-Selektor
Der [attribute$="value"]Selektor wird verwendet, um Elemente auszuwählen, deren Attributwert mit einem bestimmten Wert endet.
Das folgende Beispiel wählt alle Elemente mit einem Klassenattributwert aus, der mit „test“ endet:
Hinweis: Der Wert muss kein ganzes Wort sein!
Beispiel
[class$="test"] {
background: yellow;
}
CSS [attribute*="value"] Selektor
Der [attribute*="value"]Selektor wird verwendet, um Elemente auszuwählen, deren Attributwert einen bestimmten Wert enthält.
Das folgende Beispiel wählt alle Elemente mit einem Klassenattributwert aus, der „te“ enthält:
Hinweis: Der Wert muss kein ganzes Wort sein!
Beispiel
[class*="te"] {
background: yellow;
}
Styling-Formulare
Die Attributselektoren können nützlich sein, um Formulare ohne Klasse oder ID zu gestalten:
Beispiel
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}
Tipp: Besuchen Sie unser Tutorial zu CSS-Formularen , um weitere Beispiele zum Gestalten von Formularen mit CSS zu erhalten.
Alle CSS-Attributselektoren
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |