CSS3 Selectoren - Browsersupport

test Die Testseite benötigt aktiviertes JavaScript!
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

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 22. 08. 2020
Render Time: 0.333 sec.