Einführung
Teil des Abschnitts CSS-Meisterschaft der HTML-Journey von Coddy. Lektion 1 von 43.
Im vorherigen Abschnitt haben wir uns grundlegende Selektoren wie Tags, Klassen, IDs und Gruppenselektoren sowie den Universalselektor angesehen. Diese haben dir die Werkzeuge gegeben, um mit dem Stylen von Elementen auf der Seite zu beginnen.
Jetzt legen wir ein wenig zu. In diesem Kapitel lernst du einige intelligentere Möglichkeiten kennen, Elemente auszuwählen: insbesondere den Nachfahren-Selektor (um ein Element nur dann zu gestalten, wenn es sich innerhalb eines anderen befindet) und den Selektor für benachbarte Geschwister (um ein Element nur dann zu gestalten, wenn es direkt auf ein anderes folgt).
Diese Techniken machen dein CSS übersichtlicher, flexibler und leichter zu verwalten, wenn deine 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-Meisterschaft
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Übe selbstständig: Web-Playground