ist eine vom W3C vorgestellter Standard über die Selektion von Bestandteilen (Elemente) eines HTML- oder XML-Dokumentes für die Zuweisung von Formatvorlagen nach CSS3.
CSS Level 3 (CSS3) wird von der CSS-Working Group in eigenständigen Modulen entwickelt, um zukünftige Anforderungen schneller einarbeiten zu können. CSS Selectors liegt als Proposed Recommendation vor und soll in Kürze zum vollwertigen Standard werden. Die Selektoren aus CSS1 und CSS2 sind dabei eingeschlossen, werden jedoch um neue Möglichkeiten erweitert.
Selektoren sind:
Das Format wird jeweils bei S oder S2 angewendet. S, S1 und S2 können ein beliebiger anderer Selektor sein.
-
Typselektoren, wie z. B. alle Tags aus HTML
p,h1,div:
p {/*style*/} -
Universalselektoren, die mit dem Asterisk/Stern (*) auf alle Elemente oder bestimmte Selektoren zugreifen. In den meisten Fällen kann der Stern weggelassen werden, er erhöht aber oft die Lesbarkeit:
*.text {/*style*/}entspricht.text {/*style*/} - Attributselektoren (siehe unten)
-
Klassenselektoren sprechen Elemente mit einem
class-Attribut an. Sie beginnen mit*.oderS.:
div.content {/*style*/}oder.content {/*style*/}oderdiv[class~=content]für<div class="content"> -
ID-Selektoren, die Elemente mit einer bestimmten ID ansprechen:
#erg {/*style*/}für<div id="erg"> -
Pseudo-Klassen werden mit einem Doppelpunkt direkt an das gewünschte Element geschrieben und schränken so die Auswahl auf eine bestimmte Situation ein:
- für Hyperlinks:
-
a:link(unbesucht) -
a:visited(besucht)
-
- dynamische Klassen
-
S:hover(Mauszeiger über dem Element) -
S:active(Element ist aktiv) -
S:focus(Element hat Einfügemarke)
-
- für die Struktur:
-
S:rootWurzel-Element eines Dokumentes (bei HTML<html>) -
S:first-of-type/S:last-of-type(erster/letzter eines Typs)
S:first-child/S:last-child(erstes/letztes Kind-Element) -
S:nth-of-type(n)/S:nth-last-of-type(n)(n-tes/n-letztes Element(e) eines Typs
S:nth-of-child(n)/S:nth-last-of-child(n)(n-tes/n-letztes Kind-Element(e)
tr:nth-of-type(even|odd)jede gerade|ungerade Reihe
td:nth-of-type(1)das erste<td>-Elemente
td:nth-of-type(2n)jedes zweite<td>-Elemente (2., 4., 6.,..)
td:nth-of-type(2n+3)jedes zweite<td>-Elemente ab dem dritten (3., 5., 7.,..)
td:nth-of-type(n+2)ab dem zweiten<td>-Elemente
td:nth-of-type(-n+4)die letzten vier<td>-Elemente
td:nth-of-type(n+2):nth-last-of-type(n+4)ab der zweiten bis zur viertletzten Spalte
-
- für die Negierung
-
S2:not(S1)(wird nicht auf den Selektor S1 angewendet)
li:not(first-of-type)
-
- für Hyperlinks:
-
Pseudo-Elemente beginnen mit einem doppelten Doppelpunkt (::) und greifen auf Teile eines Dokumentes zu, die nicht weiter spezifiziert sind:
-
S::first-line(erste Zeile) -
S::first-letter(erster Buchstabe) -
S::before/S::after(vor/nach einem Inhalt)
-
-
Kombinatoren ermöglichen, die Beziehungen der Elemente untereinander auszunutzen. Auswahl:
-
S1 S2p em {/*style*/}
Das Element S2, dass in einem Element S1 auf beliebiger Ebene enthalten ist:
<p>Inhalt ist <span>nicht so <em>wichtig</em></span>.</p> -
S1 > S2
S2 ist ein Kind-Element von S1
div > p {/*style*/} -
S1 * S2
S2 ist Enkel- oder späteres Element von S1
div * p {/*style*/} -
S1 + S2
Das Element S2 folgt direkt dem Element S1
div + ol {/*style*/}
<div>
<ol><li>Liste mit Format</li></ol>
<ol><li>Liste ohne Format</li></ol>
</div> -
S1 ~ S2
Das Element S2, dass einem Element S1 auf gleicher Ebene folgt:
p ~ ol {/*style*/}
<p>Inhalt ist nicht so <em>wichtig</em>.</p>
<div>Weiter unwichtig</div>
<ol><li>Liste mit Format</li></ol>
-
Die mit CSS2 eingeführte Möglichkeit, auf ein Attribut als Kriterium zuzugreifen, wird um den Zugriff auf Teilwerte erweitert:
| Selektor | Beispiel | Beschreibung | CSS-Level |
|---|---|---|---|
| S[att] | p[class] |
Alle Paragrafen, die ein class-Attribut haben.
|
2 |
| S[att=wert] | p[class="text"] | Alle Paragrafen mit der Klasse "text". | 2 |
| S[att~=wert] | p[class~="block"] |
Alle Paragrafen, deren class-Attribut eine Liste enthält und der Wert exakt darin vorkommt, z. B. <p class="text block kleiner">
|
2 |
| S[att|=wert] | a[hreflang|=en] | Das Attribut hreflang muss exakt 'en' sein oder ein direkt anschließenden Bindestrich "-" haben, so dass Sprachdefinitionen mit Unterbeschreibung eingeschlossen werden können (en-EN, en-US usw.) | 2 |
| S[att^=wert] | p[class^="text-"] | Der Inhalt des Attributes beginnt mit dem angegebenen Wert. Alle Paragrafen, deren Klasse mit 'text-' beginnen. | 3 |
| S[att$=wert] | a[href$=".php"] | Der Inhalt des Attributes endet mit dem angegebenen Wert. Alle Verweise auf eine PHP-Seite. | 3 |
| S[att*=wert] | a[href*="index"] | Der Inhalt des Attributes enthält den angegebenen Wert. Alle Verweise auf eine Seite, deren Link 'index' enthält. | 3 |
Die Unterstützung für CSS durch die moderenen Browser ist sehr unterschiedlich (a). Teilweise werden Elemente aus CSS3 bereits unterstützt, während Elemente aus CSS2 noch fehlen.
W3C - Technical Reports
{Selectors Level 3
- http://www.w3.org/TR/css3-selectors/} (Rec)
Weiterführende Links
{Web Style Sheets home page
- http://www.w3.org/Style/}
@ W3C
(a) {Comparison of layout engines (Cascading Style Sheets)
- http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29}
@ en.Wikipedia.org