30. Januar 2007 in Journal » XHTML/CSS
Die neuen Selektoren von CSS 3
Ü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 |
Diskussion geschlossen
Die Kommentarfunktion dieses Artikels wurde deaktiviert. Private Mitteilungen an Martin bitte per E-Mail an martin@labuschin.com. Danke.
3 Kommentare
Jens Meiert am 30. Januar 2007 #
Die Übersicht ist leider nicht vollständig, einige wichtige Teile des Originals fehlen (im Zweifelsfall einfach mit der Spezifikation abgleichen ...).
Martin Labuschin am 31. Januar 2007 #
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
Jue am 10. Februar 2007 #
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?