LU02c - Spezielle Selektoren

Mit dem Universalselektor werden alle HTML-Elemente auf einmal in einem Dokument markiert. Der Universalselektor wird mit dem Sternchen * notiert.

Beispiel 1
Der folgende Universal-Selektor setzt überall einen gepunkteten grünen Rahmen.

/* Grüner, gepunkteter Rahmen für alle Elemente */
* { 
  margin: 5px;
  padding: 3px;
  border: 2px dotted green;
  text-align: center; 
}

HTML-Elemente können über ihre Attributnamen selektiert werden. In CSS muss der Attributnamen zwischen eckigen Klammern [ ] gesetzt werden.

Beispiel 1
Dieser Attributselektor wird in einem HTML-Dokument um jedes HTML-Element, das ein title-Attribut besitzt, einen Rahmen zeichnen.

/* Styling für alle Elemente mit dem Attribut title */
[title] {
  border: 4px solid black;
}

Beispiel 2
Dieser Attributselektor kann auch auf bestimmte HTML-Elemente angewendet werden. Im Beispiel unten selektiert der Attributselektor alle title-Attribute des <a>-Elements.

/* Styling for alle a-Element mit dem Attribut title */
a[title] { 
  text-decoration: none;
  color: red;
  font-weight: bold;
  border: 2px dotted red;
}

Mit dem Attributselektor können Attribute mit einem bestimmten Wert selektiert werden. Es gibt drei Möglichkeiten einen bestimmten Attributwert auszuwählen: