Gewinnen Sie mit diesen erweiterten CSS-Selektoren mehr Einfluss auf Ihre Webdesigns.

CSS unterstützt eine Vielzahl von Selektoren, um Elemente für die Gestaltung zu identifizieren, jeder mit seinem eigenen Regelsatz. Während die meisten Auswahlmethoden unkompliziert sind, bieten Pseudoklassen und Pseudoelemente mehr Flexibilität. Mit ihnen können Sie Elemente basierend auf ihrem Zustand oder ihrer Position innerhalb einer Struktur auswählen oder bestimmte Teile des Inhalts auswählen.

Die Verwendung dieser Selektoren kann schwierig sein und es ist leicht, Pseudoklassen mit Pseudoelementen zu verwechseln. Wie unterscheidet man sie also?

CSS-Pseudoklassen verstehen

Eine CSS-Pseudoklasse ist wie ein spezielles Schlüsselwort, das Sie mit Selektoren verwenden können, um Elemente auf unterschiedliche Weise zu formatieren. Mit diesen Schlüsselwörtern können Sie Elemente gezielt ansprechen, wenn bestimmte Dinge passieren, etwa wenn ein Benutzer mit der Maus über ein Element fährt, darauf klickt oder etwas in ein Eingabefeld eingibt.

instagram viewer

Pseudoklassen machen Ihre Webseite interaktiver und reaktionsfähiger, indem sie das Aussehen oder Verhalten von Elementen basierend auf Benutzeraktionen ändern. Wenn du Verwenden Sie sie mit anderen CSS-SelektorenSie ermöglichen eine präzise Kontrolle über Styling und Interaktivität.

Syntax und Verwendung von CSS-Pseudoklassen

Die Syntax für eine CSS-Pseudoklasse besteht aus einem Doppelpunkt (:), gefolgt vom Namen einer Pseudoklasse. Hier ist die grundlegende Syntax:

selector:pseudo-class {
/* styles */
}

In dieser Syntax:

  • Wähler bezieht sich auf das Element oder die Elemente, die Sie auswählen und auf die Sie Stile anwenden möchten. Es kann sich um ein HTML-Element, eine Klasse, eine ID oder einen komplexeren Selektor wie eine Kombination handeln. Der Selektor ist optional, aber normalerweise verwenden Sie einen; Ohne sie zielt Ihre Pseudoklasse auf alle Elemente ab, auf die sie angewendet werden kann.
  • Pseudoklasse ist das Schlüsselwort, das einen bestimmten Zustand oder eine bestimmte Bedingung darstellt, auf die Sie abzielen möchten.

CSS kategorisiert Pseudoklassen basierend auf ihrer Funktionalität und den Bedingungen, auf die sie abzielen, in mehrere Gruppen. Hier sind die Hauptkategorien zusammen mit einigen Beispielen:

Benutzerinteraktion

:schweben

Wählt ein Element aus, wenn sich der Mauszeiger darüber befindet.

:aktiv

Wählt ein Element aus, wenn ein Benutzer es aktiviert, normalerweise durch Klicken.

:hat besucht

Wählt Links aus, die der Benutzer besucht hat.

Strukturell

:erstes Kind

Wählt das erste untergeordnete Element eines übergeordneten Elements aus.

:letztes Kind

Wählt das letzte untergeordnete Element eines übergeordneten Elements aus.

:n-tes Kind (n)

Wählt Elemente basierend auf ihrer Position innerhalb eines übergeordneten Elements aus, sodass Sie gezielt auf bestimmte untergeordnete Elemente abzielen können.

Formbezogen

:deaktiviert

Wählt deaktivierte Formularelemente aus.

:überprüft

Wählt aktivierte Optionsfelder oder Kontrollkästchen aus.

UI-Elementstatus

:ungültig

Wählt ungültige Formularelemente aus.

:erforderlich

Wählt erforderliche Felder von Formularelementen aus.

:Optional

Wählt Formularelemente aus, die optionale Felder sind.

Linkbezogen

:Verknüpfung

Wählt nicht besuchte Links aus.

Sprachbasiert

:lang()

Wählt Elemente basierend auf der in ihrem „lang“-Attribut angegebenen Sprache aus.

Sie können ein allgemeines Beispiel ausprobieren Anwenden von Hover-Effekten auf Bilder in einer Galerie. Typische Stile umfassen das Vergrößern oder Verblassen dieser Bilder, wenn jemand mit der Maus darüber fährt.

Erkunden von CSS-Pseudoelementen

Ein CSS-Pseudoelement ist wie ein spezielles Schlüsselwort, das Sie mit Selektoren verwenden können, um bestimmte Teile des Inhalts eines Elements zu formatieren oder zusätzlichen Inhalt einzufügen. Mit diesen Schlüsselwörtern können Sie Elemente basierend auf ihrer Inhaltsstruktur gezielt auswählen und formatieren.

Pseudoelemente Verbessern Sie das Design und Layout Ihrer Webseite indem es Ihnen die Möglichkeit gibt, Elemente auf eine Weise zu gestalten, die traditionell nur mit echten HTML-Elementen möglich war.

CSS-Pseudoelementsyntax und -Implementierung

Pseudoelemente in CSS haben eine spezielle Syntax, die die Verwendung von zwei Doppelpunkten (::), gefolgt vom Namen des Pseudoelements. Hier ist die grundlegende Syntax:

selector::pseudo-element {
/* styles */
}

In dieser Syntax:

  • Wähler zielt auf das Element ab, auf das Sie das Pseudoelement anwenden möchten. Es kann jeder gültige CSS-Selektor sein, auch keiner.
  • Pseudoelement ist der Name des Pseudoelements, auf das Sie abzielen möchten. Sie können in einem Selektor nur ein Pseudoelement verwenden, da diese in Kombination keinen Sinn ergeben.

Hier sind einige der Pseudoelemente:

::Vor

Fügt Inhalt vor dem Inhalt des ausgewählten Elements ein.

::nach

Fügt Inhalt nach dem Inhalt des ausgewählten Elements ein.

::erster Brief

Formatiert den ersten Buchstaben des Textes innerhalb eines Elements.

::Auswahl

Formatiert den Textteil, den ein Benutzer mit seinem Cursor ausgewählt hat.

::Marker

Gestaltet das Markierungsfeld eines Listenelements (z. B. den Aufzählungspunkt oder die Zahl in einer Liste).

::Stichwort

Wendet Stile auf Hinweise in Medienelementen wie an

Der ::before und ::after Pseudoelemente Es kann besonders schwierig sein, sie zu verstehen. Wenn Sie sie also üben, können Sie den Rest leichter meistern.

Ähnlichkeiten und Unterschiede

Hier sind die Gemeinsamkeiten und Unterschiede zwischen CSS-Pseudoklassen und Pseudoelementen:

Pseudoklassen

Pseudoelemente

Syntax

Wird mit einem einzelnen Doppelpunkt (:) vorangestellt.

Mit vorangestelltem Doppelpunkt (::).

Verwendung

Wählen Sie Elemente basierend auf ihrem Zustand, ihrer Position oder ihrer Benutzerinteraktion aus und gestalten Sie sie.

Gestalten Sie bestimmte Teile des Inhalts eines Elements oder erstellen Sie virtuelle Elemente.

Selektoren

Kann an jeder Stelle innerhalb eines komplexen oder zusammengesetzten Selektors auftreten.

Muss die letzte Komponente eines Selektors sein und darf nur einmal vorkommen.

Einfügen von Inhalten

Fügt keine Inhalte ein, hauptsächlich zur Gestaltung basierend auf dem Status.

Kann Inhalte oder virtuelle Elemente vor oder nach dem Inhalt des ausgewählten Elements einfügen.

Typografisches Styling

Wird normalerweise nicht für typografische Gestaltung verwendet.

Wird für Text und typografische Gestaltung verwendet (z. B. ::first-line, ::first-letter).

Gezielte Teile

Zielt auf ganze Elemente.

Zielt auf bestimmte Teile des Inhalts eines Elements ab.

Browser-Unterstützung

Im Allgemeinen gut unterstützt.

Im Allgemeinen gut unterstützt, einige ältere Browser bieten jedoch möglicherweise nur eingeschränkte Unterstützung.

Pseudoklassen und Pseudoelemente sind in CSS wichtig für die Erstellung verschiedener Stile und interaktiver Funktionen. Obwohl sie einige Gemeinsamkeiten aufweisen, haben sie jeweils ihre eigene, einzigartige Rolle im Webdesign und in der Entwicklung.

Pseudoklassen und Pseudoelemente in Aktion

Sie können die Verwendung von CSS-Pseudoklassen und Pseudoelementen in verschiedenen Projekten üben, um Ihr Verständnis zu überprüfen. Beispiele für einfache Projekte, die Sie durchführen können, sind unter anderem Profilkarten, Navigationsmenüs und Listengestaltung. Diese Projekte bieten praktische Erfahrung, um Ihre CSS-Kenntnisse zu verbessern und gleichzeitig Interaktivität und Stil in Ihre Webdesigns zu integrieren.