Pseudoklassen
Mit Pseudoklassen können Sie bestimmte Zustände oder Positionen eines Elements auswählen. Wählt beispielsweise :hover
das Element aus, wenn sich der Mauszeiger darüber befindet, :focus
wählt das Element aus, wenn es ausgewählt ist oder den Fokus hat, :nth-child()
wählt ein bestimmtes untergeordnetes Element in einer Gruppe aus.
Beispiele:
Pseudoelemente
Mit Pseudoelementen können Sie virtuelle Elemente erstellen, um ein vorhandenes Element anzupassen.
::before
Erstellen Sie beispielsweise ::after
Elemente vor und nach einem Element ::first-line
und ::first-letter
wählen Sie die erste Zeile und den ersten Buchstaben eines Elements aus.
Beispiele:
Kombinatoren
Mit Kombinatoren können Sie Selektoren kombinieren, um Elemente basierend auf ihrer Beziehung auszuwählen. element1 element2
Wählt beispielsweise element2
innerhalb aus element1
, element1 > element2
wählt direkte untergeordnete Elemente von aus element1
und element1 + element2
wählt element2
unmittelbar danach aus element1
.
Beispiele:
Attributselektoren
Mit Attributselektoren können Sie Elemente basierend auf dem Wert ihrer Attribute auswählen. Wählt beispielsweise [attribute]
Elemente mit dem Attribut aus attribute
, [attribute=value]
wählt Elemente mit dem Attribut attribute
gleich aus value
, [attribute^=value]
wählt Elemente mit dem Attribut aus, das attribute
mit beginnt value
.
Beispiele:
:not()
Wähler
Mit dem Selektor können Sie Elemente auswählen, die nicht mit einem bestimmten Selektor übereinstimmen. Wählt beispielsweise Elemente aus, die nicht über die Klasse verfügen, und wählt Elemente aus, die nicht über die ID verfügen. :not()
:not(.class)
class
:not(#id)
id
Beispiele:
Diese Beispiele veranschaulichen die erweiterte Elementauswahl in CSS. Sie können diese Techniken anpassen und anwenden, um Elemente auf Ihrer Webseite nach Ihren Wünschen zu gestalten und anzupassen.