Übersicht: Selektoren in CSS3
kein CSS-Selector:
ein bestimmtes Elemente über CSS selektieren
erstes Element
:first-child
letztes Element (mehr)
:last-child
drittes Element (mehr)
:nth-child(3)
drittes Element vom Ende
:nth-last-child(3)
mehrere Elemente über CSS selektieren
(gleichartige Elemente + wenn genügend vorhanden)
alle ungeraden
:nth-child(odd)
alle geraden
:nth-child(even)
Berechnung anhand Formel
:nth-child(3n)
Elemente ohne Inhalt
Hier können alle Elemente ohne einen Inhalt angesprochen werden. Das wird in der Praxis gerne Tabellenzellen ohne Inhalt sein.
Elemente ohne Inhalt
:empty
- X
- X
- X
- X
- X
Elemente die NICHT dem Selektor entsprechen
Wenn bei unserer Aufzählung den ersten 4 der Klassenselektor .da
zugewiesen wurde, können wir alle andere selektieren, die diese Klasse nicht haben. CSS-Anweisung: li:not(.da)
ohne bestimmten Selektor
:not(SELEKTOR)
- .da
- .da
- .da
- .da
Elemente die nur EINMAL in Elternelement vorkommen
Wenn ein übergeordnetes Element (Elternelement) nur 1 einziges Kindelement besitzt, kann dies über den :only-child
Selektor ausgewählt werden. Im Beispiel hat die <ul>
nur ein einiges <li>
. Die zweite Liste ist unberührt, da es dort 2 Elemente gibt.
nur 1 Kindelement
:only-child
- p
- li
- p
- p
- li
- li
- p
-of-type Elemente desselben Typs
Mit den Struktur-Pseudoklassen
:first-of-type
:last-of-type
:nth-of-type(x)
:nth-last-of-type(x)
:only-of-type
werden Elemente desselben Typs angesprochen. Im ersten Augenblick fühlen sie diese CSS-Selektoren sehr ähnlich wie ihre Kollegen von der Fraktion :nth-child(x)
an, aber die Feinheiten sind es.
:checked Selektor für angewählte Checkboxen
Hier kann auf eine durch den Benutzer angekreuzte Checkboxen reagiert werden. So kann z.B. die angekreuzte Checkbox hervorgehoben werden.
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details