CSS/Selektoren/Universalselektor

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Das Sternzeichen „*“ (der Asterisk) ist der Universalselektor. Mit ihm werden alle Elemente in einem Dokument angesprochen.

Beispiel ansehen …
<!doctype html> <html> <head> <title>CSS-Beispiel: Universalselektor</title> <style> * {border: 3px solid green;} </style> </head> <body> <p>Dieses Beispiel demonstriert die Wirkung des Universalselektors auf <abbr>HTML</abbr>-Dokumente.</p> </body> </html>
Zeigt ein Browser obiges Dokument an, so wird um die Elemente html, body, p und abbr ein grüner Rahmen gezeichnet. Das Element head und seine Kindelemente werden aufgrund ihrer speziellen Eigenschaften in HTML überhaupt nicht angezeigt.

Anwendung[Bearbeiten]

In Verbindung mit anderen Selektoren ist der Universalselektor oft überflüssig. Auch erhöht er nicht die Spezifität des Selektors.

Beispiel
*.class    /* identisch mit .class */
*#id       /* identisch mit #id    */
*:hover    /* identisch mit :hover */

Der Universalselektor muss bei einer solchen Verwendung immer als erstes aufgeführt werden.

Beachten Sie: Der nachfolgende Code ist fehlerhaft.
Beispiel: (fehlerhafter Code)
.class* {  }
Korrekt wäre *.class.

Notwendig wird er hingegen, wenn Sie einen Selektor benötigen, der auf der Struktur der Webseite aufbaut. Beispielsweise kann der Wunsch bestehen Linkelemente, die sich in einem Textauszeichnungselement innerhalb von Absätzen befinden (quasi Enkel der Absätze), anders zu formatieren.

Beispiel ansehen …
p a       { color: blue; }
P * a     { background: silver; }
p > * > a { border: 2px solid red; }
<p>
  Dieser Textabsatz enthält ein 
  <a href="#">Linkelement (Kind des Absatzes)</a>. 
  In einem 
  <span>Spanelement befindet sich ein 
    <a href="#">weiterer Link</a>. Er ist ein Enkelkind des Absatzes.
  </span> 
  <small>Small-Elemente enthalten nebensächliche Informationen. 
    <span>Auch in ihnen können sich
      <span>weitere Elemente mit noch 
        <a href="#">tiefer verschachtelten Links</a>
      </span> befinden.
    </span>
  </small>
</p>
Alle Verweise innerhalb von Textabsätzen werden in blauer Schrift dargestellt; diejenigen, die mindestens Enkelkind sind, erhalten einen grauen Hintergrund; die Enkelkinder zudem einen roten Rahmen.

siehe auch[Bearbeiten]