CSS-Attribut-Selektoren

Stile für HTML-Elemente mit bestimmten Attributen setzen

Wir können die Stile für HTML-Elemente mit bestimmten Attributen oder Attributwerten setzen.

CSS [attribute] Selektor

[attribute] Selektor wird verwendet, um Elemente auszuwählen, die eine bestimmte Eigenschaft haben.

Im folgenden Beispiel werden alle <a>-Elemente mit dem Attribut target ausgewählt;

Beispiel

a[target] {
  background-color: yellow;
}

Probieren Sie es selbst aus

CSS [attribute="value"] Selektor

[attribute="value"] Selektor wird verwendet, um Elemente auszuwählen, die eine bestimmte Eigenschaft und einen Wert haben.

Im folgenden Beispiel werden alle <a>-Elemente mit dem Attribut target="_blank" ausgewählt:

Beispiel

a[target="_blank"] { 
  background-color: yellow;
}

Probieren Sie es selbst aus

CSS [attribute~="value"] Selektor

[attribute~="value"] Selektor wählt Elemente aus, deren Attributwert ein bestimmtes Wort enthält.

Im folgenden Beispiel werden alle Elemente mit dem Attribut title, das das Wort "flower" enthält, ausgewählt:

Beispiel

[title~="flower"] {
  border: 5px solid yellow;
}

Probieren Sie es selbst aus

Der obige Beispiel wird die folgenden Elemente mit den Attributen title="flower", title="summer flower" und title="flower new" auswählen, aber nicht mit title="my-flower" oder title="flowers".

CSS [attribute|="value"] Selektor

[attribute|="value"] Selektor wird verwendet, um Elemente auszuwählen, die mit einer bestimmten Eigenschaft und einem Wert beginnen.

Im folgenden Beispiel werden alle Elemente mit einem class-Attribut, das mit "top" beginnt, ausgewählt:

Anmerkung:Der Wert muss ein vollständiges oder einzelnes Wort sein, z.B. class="top" oder gefolgt von einem Bindestrich, z.B. class="top-text".

Beispiel

[class|="top"] {
  background: yellow;
}

Probieren Sie es selbst aus

CSS [attribute^="value"] Wähler

[attribute^="value"] Wähler wird verwendet, um Elemente auszuwählen, deren Attribut mit dem angegebenen Wert beginnt.

Im folgenden Beispiel werden alle Elemente mit einem class-Attribut, das mit "top" beginnt, ausgewählt:

Tipp:Der Wert muss nicht ein vollständiges Wort sein!

Beispiel

[class^="top"] {
  background: yellow;
}

Probieren Sie es selbst aus

CSS [attribute$="value"] Wähler

[attribute$="value"] Wähler wird verwendet, um Elemente auszuwählen, deren Attribut mit dem angegebenen Wert endet.

Im folgenden Beispiel werden alle Elemente mit einem class-Attribut, das mit "test" endet, ausgewählt:

Tipp:Der Wert muss nicht ein vollständiges Wort sein!

Beispiel

[class$="test"] {
  background: yellow;
}

Probieren Sie es selbst aus

CSS [attribute*="value"] Wähler

[attribute*="value"] Wähler wählt Elemente aus, deren Attributwert das angegebene Wort enthält.

Im folgenden Beispiel werden alle Elemente mit einem class-Attribut, das "te" enthält, ausgewählt:

Tipp:Der Wert muss nicht ein vollständiges Wort sein!

Beispiel

[class*="te"] {
  background: yellow;
}

Probieren Sie es selbst aus

Formularstile einrichten

Wenn Sie Stile für Formulare ohne class oder id setzen möchten, sind Attributwähler sehr nützlich:

Beispiel

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Probieren Sie es selbst aus

Tipp:Besuchen Sie unsere CSS-Formular-TutorialLernen Sie mehr darüber, wie Sie mit CSS Formularstile einrichten, indem Sie hier weiterlesen.

Alle CSS-Attributwähler

Wähler Beispiel Beispielbeschreibung
[attribute] [target] Wählen Sie alle Elemente mit dem Attribut target.
[attribute=value] [target=_blank] Wählen Sie alle Elemente mit dem Attribut target="_blank".
[attribute~=value] [title~=flower] Wählen Sie alle Elemente mit einem title-Attribut, das das Wort "flower" enthält.
[attribute|=value] [lang|=en] Wählen Sie alle Elemente mit einem lang-Attribut, das mit "en" beginnt.
[attribute^=value] a[href^="https"] Wählen Sie jeden <a>-Element, dessen href-Attributwert mit "https" beginnt.
[attribute$=value] a[href$=".pdf"] Wählen Sie jeden <a>-Element, dessen href-Attributwert mit ".pdf" endet.
[attribute*=value] a[href*="codew3c"] Wählen Sie jeden <a>-Element aus, dessen href-Attributwert den Unterstring "codew3c" enthält.

Erweiternde Lektüre

Außerschulische Lektüre:CSS Attributselektoren im Detail