Tabelle 2 beschreibt den Geltungsbereich einiger einfacher und einiger verschachtelter Selektoren: Elementtypen, Klassen, ID und Attribute (beispielhafte, vereinfachte Darstellung):
| Bsp. |
Selektor |
CSS-Angaben {...} gelten für ... |
| 1 |
h1 {...} |
Elemente <h1>...</h1> ohne zugewiesene Klasse oder ID (implizite CSS-Zuweisung) |
| 2 |
.xyz {...} |
Elemente der class="xyz" |
| 3 |
#nav a.xyz {...} |
Element <a class="xyz" ...>...</a> in Element der id="nav" |
| 4 |
#nav a:link.xyz {...} |
Element <a class="xyz" ...>...</a> der Pseudoklasse "link" in Element der id="nav" |
| 5 |
li a {...} |
Element <a ...>...</a> in Element <li>...</li> |
| 6 |
#nav li a {...} |
Element <a ...>...</a> in Element <li>...</li> in Element der id="nav" |
| 7 |
h1.xyz {...} |
Element <h1 class="xyz">...</h1> |
| 8 |
.aa .bb .cc {...} |
Elemente der class="cc" innerhalb der class="bb" innerhalb der class="aa" (verschachtelte Klassen: aa höchste, cc niedrigste Klasse) |
| 9 |
.xyz h3 a {...} |
Element <a ...>...</a> in Element <h3>...</h3> in Element der class="xyz" |
| 10 |
.xyz h3 a:visited {...} |
Element <a ...>...</a> der Pseudoklasse "visited" in Element <h3>...</h3> in Element der class="xyz" |
| 11 |
ul#nav a {...} |
Element <a ...>...</a> in Element <ul>...</ul> der id="nav"
Der vorangestellte Elementtyp wird von älteren Versionen als Internet Explorer 5 und
Netscape 6 nicht erkannt. |
| 12 |
a[href ^="http://"],
a[href ^="https://"] {...} |
Elemente <a ...>...</a>, aber nur dann, wenn sie am Anfang ihres href-Attributs die Zeichenketten http:// oder https:// enthalten (attribut-bedingte CSS-Zuweisung) |
| a[href $=".pdf"] {...} |
Elemente <a ...>...</a>, aber nur dann, wenn sie am Ende ihres href-Attributs die Zeichenkette .pdf enthalten (attribut-bedingte CSS-Zuweisung) |
| Über solche attribut-bedingte CSS-Zuweisungen können zum Beispiel Hintergrundbilder automatisch eingesteuert werden. Die IE-Versionen 6 und älter erkennen bedingte CSS-Zuweisungen nicht. |
|
Auf jeder Seite darf nur ein Element mit der gleichen ID gekennzeichnet sein. Bei mehreren Elementen mit gleichen Eigenschaften kann die Zuweisung über Klassen erfolgen.
|
|
Einem Element können auch mehrere Klassen zugewiesen werden; Trennzeichen zwischen den Klassen ist das Leerzeichen (ohne Komma). Beispiel: <p class="einruecken ausrichten">...</p>
|
|
Weitere Möglichkeiten ergeben sich durch Kombination der hier dargestellten Beispiele.
|
Kommentare in CSS-Bereichen werden wie in PL/1 gekennzeichnet:
/* Dies ist ein Kommentar */
|
