CSS3 Selectoren - Browsersupport
| Selektor | Beschreibung | Beispiel | Anmerkung | CSS Vers. |
Support | Typ |
|---|---|---|---|---|---|---|
| * | Alle Elemente | * | Steuert alle HTML-Elemente | 2 | 1 | Universalselektor |
| E | Alle Elemente E | h1 | Steuert alle h1-Elemente | 1 | 2 | Typselektor |
| E F | Alle Elemente F, die innerhalb der Elemente E vorkommen | ul li | Steuert alle li-Elemennte, die in einer ul vorkommen | 1 | 3 | Descendant combinator test |
| E.meine-klasse | Alle Elemente E mit dem class-Attributwert "meine-klasse" | h1.meine-klasse | Steuert alle h1-Elemente, die die class "meine-klasse" haben | 1 | 4 | Class Selektors test |
| E#meine-id | Das Element E mit dem id-Attributwert "meine-id" | #meine-id | Steuert das HTML-Element mit der id "meine-id" | 1 | 5 |
ID Selektors
test |
| E > F | Alle direkten Kindelemente F unterhalb der Elemente E | p > strong | Steuert die strong-Elemente, die direkt unterhalb eines p-Elements vorkommen (nicht solche, die in der Struktur weiter unten vorkommen) | 2 | 6 | Child combinator test |
| E + F | Ein Kindelement F, das direkt einem Element E folgt | a + strong | Steuert strong-Elemente, die direkt hinter a-Elementen stehen (nur das direkte Geschwisterelement) | 2 | 7 | Adjacent sibling combinator test |
| E ~ F | Alle Elemente F, die einem Element E folgen | a ~ strong | Steuert alle strong-Elemente, die hinter einem a-Element stehen (alle Geschwisterelemente) | 3 | 8 | test
General sibling combinator
test test |
| E:link | Alle nicht besuchte Links | a:link | Steuert alle Links, die noch nicht angeklickt wurden | 1 | 9 | The link pseudo-classes test |
| E:visited | Alle besuchte Links | a:visited | Steuert alle Links, die bereits angeklickt wurden | 1 | 10 | test |
| E:active | Aktiver Link | a:active | Steuert den Link in dem Moment, wenn er von dem Benutzer angeklickt wird | 1+2 | 11 | The user action pseudo-classes test |
| E:hover | Link bei Mouseover | a:hover | Steuert den Link, den der Benutzer mit der Maus überfährt | 1+2 | 12 | The user action pseudo-classes |
| E:focus | Link beim Fokus | a:focus | Steuert den Link, an dessen Position sich der Benutzer beim "Tabben" befindet | 1+2 | 13 | The user action pseudo-classes test |
| E[attr] | Alle Elemente E mit dem Attribut "attr" | img[title] | Steuert img-Elemente mit den Attributen title. Dabei spielt es keine Rolle, ob oder welchen Wert diese haben | 2 | 14 | Attribute Selektors test |
| E[attr="value"] | Alle Elemente E mit exakt dem Wert "value" im Attribut "attr" | p[class="warnung"] | Steuert alle p-Elemente, deren class-Attribute genau und ausschließlich den Wert "warnung" hat | 2 | 15 | Attribute Selektors test |
| E[attr~="value"] | Alle Elemente E, deren Attribute "attr" den Wert "value" hat | p[class~="warnung"] | Steuert alle p-Elemente, deren class-Attribute unter anderen den Wert "warnung" hat | 2 | 16 | Attribute Selektors test |
| E[attr^="value"] | Alle Elemente E, deren Werte des Attributs "attr" mit "value" anfangen | p[class^="war"] | Steuert alle p-Elemente, deren class-Attributwerte mit der Zeichenkette "war" anfangen. class="warnung" würde von der Anweisung gefunden | 3 | 17 | Attribute Selektors test |
| E[attr$="value"] | Alle Elemente E, deren Werte des Attributs "attr" mit "value" enden | p[class$="nung"] | Steuert alle p-Elemente, deren class-Attributwerte mit der Zeichenkette "nung" enden. class="warnung" würde von der Anweisung gefunden | 3 | 18 | Attribute Selektors test |
| E[attr*="value"] | Alle Elemente E, in deren Werten des Attributs "attr" "value" vorkommt | p[class*="arn"] | Steuert alle p-Elemente, in deren class-Attributwerten die Zeichenkette "arn" vorkommt. class="warnung" würde von der Anweisung gefunden | 3 | 19 | Attribute Selektors
test |
| E[attr|="en"] | Alle Elemente E, deren Werte des Attributs "attr" eine Reihe von mit Minuszeichen getrennten Segmenten hat, wovon das erste "en" ist. | td[lang|="de"] | Steuert alle td-Elemente, deren lang-Attribut als ersten Teilwert "de" hat. lang="de" und lang="de-CH" würden von der Anweisung gefunden | 2 | 20 | Attribute Selektors
test |
| E:root | Wurzelelement eines Dokuments | :root | Ist in HTML-Dateien immer das html-Tag | 3 | 21 | Structural pseudo-classes |
| E:nth-child(n) | Jedes n-te Kindelement innerhalb der Elemente E | ul:nth-child(2n+0) | Steuert jedes zweite Kindelement in einem ul-Element. Dabei wird hier bei 0 begonnen zu zählen | 3 | 22 | Structural pseudo-classes |
| E:nth-last-child(n) | Jedes n-te Kindelement innerhalb der Elemente E jeweils von hinten gezählt | ul:nth-last-child(3n-1) | Steuert jedes dritte Kindelement in einem ul-Element. Dabei wird hier bei -1 begonnen zu zählen und es wird vom letzen Kindelement innerhalb des ul-Elements aus rückwärts gezählt | 3 | 23 | Structural pseudo-classes |
| E:nth-of-type(n) | Jedes n-te Geschwisterelement E vom gleichen Typ | li:nth-of-type(2n+0) | Steuert jedes zweite li-Element auf gleicher Ebene. Hier wird bei 0 begonnen zu zählen | 3 | 24 | Structural pseudo-classes |
| E:nth-last-of-type(n) | Jedes n-te Geschwisterelement E vom gleichen Typ von hinten gezählt | th:nth-last-of-type(n+3) | Steuert jedes dritte th-Element auf gleicher Ebene. Dabei wird hier bei 3 begonnen zu zählen und es wird vom letzen Element aus rückwärts gezählt | 3 | 25 | Structural pseudo-classes |
| E:first-child | Jedes erste Kindelement der Elemente E | ol:first-child | Steuert das jeweils erste Element innerhalb aller ol-Elemente | 2 | 26 | Structural pseudo-classes |
| E:last-child | Jedes letzte Kindelement der Elemente E | tr:last-child | Steuert das jeweils letzte Element innerhalb aller tr-Elemente | 3 | 27 | Structural pseudo-classes |
| E:first-of-type | Jedes erste Kindelement von Elementen E vom gleichen Typ | td:first-of-type | Steuert die jeweils ersten Kindelemente vom gleichen HTML-Elemententyp aller td-Elemente. | 3 | 28 | Structural pseudo-classes |
| E:last-of-type | Jedes letzte Kindelement von Elementen E vom gleichen Typ | li:last-of-type | Steuert die jeweils letzte Kindelemente vom gleichen HTML-Elemententyp aller li-Elemente. | 3 | 29 | Structural pseudo-classes test test |
| E:only-child | Jedes Element E, das das einzige Kindelement im Elternelement ist | strong:only-child | Steuert alle strong-Element, die keine Geschwisterelemente haben und damit die einzigen Kindelemente in ihren Elternelementen sind. | 3 | 30 | Structural pseudo-classes testtest |
| E:only-of-type | Jedes Element E, das das einzige Kindelement mit seinem Typ im Elternelement ist | strong:only-of-type | Steuert alle strong-Element, die keine Geschwisterelemente vom Typ strong haben. | 3 | 31 | Structural pseudo-classes
test |
| E:empty | Jedes leere Element E, das weder Kindelemente noch Text hat | td:empty | Steuert alle leeren td-Elemente | 3 | 32 | Structural pseudo-classes |
| E:target | Das Element E, das mit der aktiven Sprungmarke versehen ist | h2:target | Steuert alle h2-Elemente, wenn diese ein Sprungmarke haben in dem Moment, wo sie angesprungen werden | 3 | 33 | The target pseudo-class |
| E:lang(de) | Jedes Element E mit einer bestimmten Sprachauszeichnung | p:lang(de) | Steuert alle p-Elemente mit der Sprachauszeichnung "de". Greift auch, wenn die lang-Eigenschaft geerbt wurde | 2 | 34 | The :lang() pseudo-class |
| E:enabled | Eingabefelder E, die Eingaben bzw. die Bedienung zulassen | #vorname:enabled | Steuert das Formularfeld mit der id "vorname", in das Werte eingegeben werden können. | 3 | 35 | The UI element states pseudo-classes |
| E:disabled | Gesperrte Eingabefelder E, die keine Eingabe bzw. Bedienung zulassen | #email:disabled | Steuert das Formularfeld mit der id "email", wenn es über das Attribut "disabled" für die Eingabe gesperrt ist | 3 | 36 | The UI element states pseudo-classes |
| E:checked | Checkboxen oder Radioboxen E, die aktiviert sind | #agb:checked | Steuert die Checkbox mit der id "agb", wenn sie angeklickt ist | 3 | 37 | The UI element states pseudo-classes |
| E::first-line | Die jeweils ersten Zeilen in den Elementen E | p::first-line | Steuert die ersten Zeilen in allen p-Elementen | 1 | 38 | The ::first-line pseudo-element |
| E::first-letter | Die jeweils ersten Buchstaben in den Elementen E | strong::first-letter | Steuert die ersten Buchstaben in allen strong-Elementen | 1 | 39 | The ::first-letter pseudo-element |
| E::before | Generierter Content vor den Elementen E | h1::before | Steuert die generierten Inhalte vor allen h1-Elementen | 2 | 40 | The ::before pseudo-element test |
| E::after | Generierter Content hinter den Elementen E | h1::after | Steuert die generierten Inhalte hinter allen h1-Elementen | 2 | 41 | The ::after pseudo-element test |
| E:not(s) | Alle Elemente E, die nicht vom Typ s sind | table:not(th) | Steuert alle Elemente im table-Elementen, die kein th-Element sind | 3 | 42 | Negation pseudo-class test |