Attributselektoren in CSS

1. Arten von Attributselektoren

Attributselektoren in CSS ermöglichen es dir, HTML-Elemente basierend auf den Werten ihrer Attribute auszuwählen, wie z. B. id, class, name, type und andere. Sie bieten Flexibilität und Genauigkeit bei der Auswahl von Elementen, was besonders nützlich ist, um Formularelemente, Links und andere Elemente mit einzigartigen Attributen zu stylen. In diesem Artikel gehen wir auf die verschiedenen Typen von Attributselektoren und deren Anwendung ein.

Attributselektoren lassen sich in mehrere Kategorien einteilen, die es ermöglichen, Elemente basierend auf dem Vorhandensein eines Attributs, dessen genauem Wert oder einem Teil davon auszuwählen. Die Haupttypen von Attributselektoren sind:

1. Attributselektor: Wählt Elemente aus, die ein bestimmtes Attribut enthalten, unabhängig von dessen Wert.
2. Attributselektor mit Wert: Wählt Elemente aus, deren Attribut den angegebenen Wert hat.
3. Attributselektor mit Startwert: Wählt Elemente aus, deren Attributwert mit einem bestimmten Präfix beginnt.
4. Attributselektor mit Endwert: Wählt Elemente aus, deren Attributwert mit einem bestimmten Suffix endet.
5. Attributselektor, der den Wert enthält: Wählt Elemente aus, deren Attributwert eine bestimmte Teilzeichenkette enthält.
6. Attributselektor mit Leerzeichen-Trennung: Wählt Elemente aus, deren Attributwert ein bestimmtes Wort enthält, das durch Leerzeichen getrennt ist.
7. Attributselektor mit Bindestrich-Trennung: Wählt Elemente aus, deren Attributwert ein bestimmtes Wort enthält, das durch Bindestriche getrennt ist.

2. Attributselektor

Der Attributselektor wählt Elemente aus, die ein bestimmtes Attribut haben, unabhängig von dessen Wert. Dieser Selektor ist nützlich, wenn wir alle Elemente mit einem bestimmten Attribut auswählen müssen.

input[type] {
  border: 1px solid black;
}

<input type="text">
<input type="password">
<input type="email">
<input>

In diesem Beispiel erhalten alle <input>-Elemente mit dem Attribut type einen schwarzen Rahmen, unabhängig vom Wert dieses Attributs.

3. Attributselektor mit Wert

Der Attributselektor mit Wert wählt Elemente aus, deren Attribut den angegebenen Wert hat. Dies ist nützlich, wenn du Elemente mit einem bestimmten Attributwert auswählen möchtest, z. B. alle Textfelder oder Links, die in einem neuen Tab geöffnet werden.

    
input[type="text"] {
  background-color: #f0f0f0;
}
    
  

    
<input type="text">
<input type="password">
<input type="email">
    
  

Hier wird nur das Textfeld <input type="text"> mit einem hellgrauen Hintergrund versehen.

4. Attributselektor mit Startwert

Der Attributselektor mit Startwert wählt Elemente aus, deren Attributwert mit einem bestimmten Präfix beginnt. Der Präfix wird nach dem Symbol ^= angegeben. Dieser Selektor ist nützlich, z. B. um alle Links auszuwählen, die auf eine bestimmte Website verweisen.

    
a[href^="https://example.com"] {
  color: green;
}
    
  

    
<a href="https://example.com/page1">Link zur Website example.com</a>
<a href="https://another.com">Ein anderer Link</a>
    
  

Nur der erste Link wird grün eingefärbt, da er mit "https://example.com" beginnt.

5. Attributselektor mit Endwert

Der Attributselektor mit Endwert wählt Elemente aus, deren Attributwert mit einem bestimmten Suffix endet. Das Suffix wird nach dem Symbol $= angegeben. Dieser Selektor ist nützlich, um Dateien eines bestimmten Typs auszuwählen, z. B. Bilder im .png-Format.

    
img[src$=".png"] {
  border: 2px solid blue;
}
    
  

    
<img src="image1.png" alt="Bild 1">
<img src="image2.jpg" alt="Bild 2">
    
  

Hier erhält nur das Bild mit der Erweiterung .png einen blauen Rahmen.

6. Attributselektor, der den Wert enthält

Der Attributselektor, der den Wert enthält, wählt Elemente aus, deren Attributwert eine bestimmte Teilzeichenkette enthält. Diese wird nach dem Symbol *= angegeben. Dieser Selektor ist geeignet, wenn du Elemente mit einem Attribut auswählen musst, das einen bestimmten Teilwert enthält, z. B. Links zu einem bestimmten Bereich einer Website.

    
a[href*="section"] {
  font-weight: bold;
}
    
  

    
<a href="https://example.com/section1">Link zum Abschnitt 1</a>
<a href="https://example.com/about">Über uns</a>
<a href="https://example.com/section2">Link zum Abschnitt 2</a>
    
  

Nur Links, die "section" in ihrem href enthalten, werden fett angezeigt.