Überblick der CSS 3 Selektor Syntax
| Syntax-Muster | Erklärung | Beispiel | Wortlaut |
|---|---|---|---|
| E[att^=”val”] | Betrifft alle Elemente E, deren att-Attribute mit dem Wert val beginnen | a[href^=”http://”] | Alle a Elemente, die auf eine absolute URL verweisen |
| E[att$=”val”] | Betrifft alle Elemente E, deren att-Attribute mit dem Wert val enden | a[href$=”.pdf"] | Alle a Elemente, die auf ein PDF-Dokument verweisen |
| E[att*=”val”] | Betrifft alle Elemente E, deren att-Attribute den Wert val enthalten | table[summary*=”Monat”] | Alle Tabellen, die in der Tabellen-Übersicht das Wort "Monat" enthalten, welches aber durch andere Inhalte umgeben sein kann |
| E:nth-child(n) | Betrifft alle Elemente E, die das n. Kindelement Ihres Elternelementes sind (gezählt vom ersten Element) | li:nth-child(5) | Der fünfte Listenpunkt |
| E:nth-last-child(n) | Betrifft alle Elemente E, die das n. Kindelement Ihres Elternelementes sind (gezählt vom letzten Element) | li:nth-last-child(3) | Drittletzter Listenpunkt |
| E:last-child | Betrifft alle Elemente E, die das letzte Kindelement Ihres Elternelementes sind | li:last-child | Letzter listenpunkt |
| E:only-child | Betrifft alle Elemente E, die das einzige Kindelement Ihres Elternelementes sind | p:only-child | Einziger Absatz des Elternelements |
| E:empty | Betrifft alle absolut leeren Elemente E | textarea:empty | Alle nicht-ausgefüllten Textfelder |
| E:enabled | Betrifft alle änderbaren Kontroll-Elemente E | input:enabled | Alle Eingabefelder, die man ändern kann |
| E:disabled | Betrifft alle geschützten Kontrol-Elemente E | input:disabled | Alle schreibgeschützen Eigabefelder |
| E:checked | Betrifft alle aktivierten Kontroll-Elemente E | input:checked | Alle Eingabefelder, die aktiviert wurden (z.B. Checkboxes) |
| E::selection | Betrifft alle markierten Bereiche des Elementes E | p::selection | Der markierte Text in einem Absatz |
| E:not(s) | Betrifft alle Elemente E, die nicht den einfachen Selektoren s aufweisen | p:not(.summary) | Alle Absätze ohne summary-Klasse |
| E ~ F | Betrifft alle Elemente F, den ein Element E vorangeht | h1 ~ p | Der Absatz unter der ersten Überschrift |
Dass diese Liste nicht vollständig ist, steht schon im ersten Absatz dieses Artikels. Ich habe mir die vollständige Übersicht bei Roger angeschaut und eine Auswahl getroffen.
Ich glaube wichtig ist relativ :)
Wer mehr wissen will http://www.w3.org/TR/css3-selectors
Schön! Das klingt ja wirklich vielversprechend.
Aber ein Frage: Ab wann werden die Browser diese Spezifikationen beherrschen?! Natürlich kann man das nicht so genau sagen, aber was meint ihr?
Jens Meiert
29.01.2007
Die Übersicht ist leider nicht vollständig, einige wichtige Teile des Originals fehlen (im Zweifelsfall einfach mit der Spezifikation abgleichen ...).