Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » CSS lernen – Webdesign erstellen » Selektoren in CSS3 - Übersicht

Ü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 :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

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.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details