CSS [Eigenschaft=Wert] Selektor

Definition und Verwendung

CSS [Eigenschaft=Wert] Selektoren werden verwendet, um Elemente auszuwählen, die eine bestimmte Eigenschaft haben und deren Wert vollständig übereinstimmt.

Beispiel

Beispiel 1

Wählen und stylen Sie alle <a>-Elemente mit target="_blank". Wählen und stylen Sie gleichzeitig alle <p>-Elemente mit lang="it":

a[target="_blank"] {
  background-color: yellow;
}
p[lang="it"] {
  background-color: salmon;
}

Versuchen Sie es selbst

Beispiel 2

Setzen Sie die Breite des <input type="text">-Elements auf 100px. Wenn es jedoch den Fokus erhält, wird die Breite auf 250px gesetzt:

input[type="text"] {
  width: 100px;
}
input[type="text"]:focus {
  width: 250px;
}

Versuchen Sie es selbst

CSS-Syntax

[Eigenschaft = Wert] {
  css-Anweisungen;
}

Technische Details

Version: CSS2

Browser-Unterstützung

Die Zahlen in der Tabelle zeigen die erste Browser-Version, die den Selektor vollständig unterstützt.

Chrome Edge Firefox Safari Opera
4.0 7.0 2.0 3.1 9.6

Verwandte Seiten

CSS-Tutorial:CSS Attributauswahler

CSS-Tutorial:CSS-Attribut-Selektoren im Detail