Einführung
Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 1 von 43.
Im vorherigen Abschnitt haben wir uns grundlegende Selektoren wie Tags, Klassen, IDs, Gruppen-Selektoren und den universellen Selektor angesehen. Diese haben Ihnen die Werkzeuge an die Hand gegeben, um mit dem Styling von Elementen auf der Seite zu beginnen.
Jetzt gehen wir einen Schritt weiter. In diesem Kapitel lernen Sie einige intelligentere Möglichkeiten kennen, um Elemente auszuwählen – insbesondere den Nachfahren-Selektor (um ein Element nur dann zu gestalten, wenn es sich innerhalb eines anderen befindet) und den direkten Nachbar-Selektor (um ein Element nur dann zu gestalten, wenn es direkt auf ein anderes folgt).
Diese Techniken machen Ihr CSS sauberer, flexibler und einfacher zu verwalten, wenn Ihre Projekte wachsen.
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