Pseudoklassen
Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 7 von 43.
Interaktive Pseudoklassen ermöglichen es Ihnen, das Aussehen von Elementen zu ändern, wenn Benutzer Aktionen ausführen, wie z. B. mit der Maus darüber fahren, darauf klicken oder sie auswählen. Sie tragen dazu bei, dass sich Ihre Website reaktionsschneller anfühlt und mehr Spaß bei der Nutzung macht.
Die Syntax von Pseudoklassen:
selector:pseudo-class {
property: value;
}
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Spickzettel
Interaktive Pseudoklassen ändern das Erscheinungsbild von Elementen basierend auf Benutzerinteraktionen. Sie verwenden die Syntax:
selector:pseudo-class {
property: value;
}Probier es selbst
Diese Lektion enthält keine Programmieraufgabe.
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in CSS Mastery
1Selektoren-Meisterschaft – Kombinationen
EinführungNachfahren-SelektorKind-SelektorDirekter Nachbar-SelektorAllgemeiner Geschwister-SelektorWiederholungs-Challenge4Projekt: Dropdown-Menü
Das Untermenü hinzufügenDas Untermenü anzeigenWeiteres StylingInput und Button7Erstellen mit CSS Grid
Grid-GrundlagenGrid-row ElementplatzierungBenannte BereicheWiederholungs-Challenge2Interaktive Pseudoklassen
PseudoklassenHover-EffekteFokus-EffekteAktiv-StylesWiederholungs-Challenge3Strukturelle Pseudoklassen
Strukturelle PseudoklassenDas erste Kind-Element ansprechenDas letzte Kind-Element ansprechenMuster-Power: nth-child nutzenWiederholungs-Challenge6Landing Page
Header-Bereich stylenDen Button stylenSektions-LayoutCard-LayoutDen letzten Schliff hinzufügen9Abschluss-Herausforderungen
Aktives Menü hervorhebenZebra-TabellenzeilenButton-Hover-EffektGrid-Card-LayoutVerschwommenes Hero-Image