CSS Selectors
9 lessonsAbout 54 minutesBeginner
This part of the CSS Tutorial runs from CSS Element Selector through to CSS Pseudo Elements. There are 9 lessons here, and working through them takes about 54 minutes at a steady pace.
It follows on from CSS Foundations, so finish that first if you have not already — the examples below assume you are comfortable with it.
Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.
- 1CSS Element SelectorSelect HTML elements by tag name and understand when a broad type selector is appropriate for document defaults and base styles.
- 2CSS Class SelectorApply reusable styles with class selectors and build names that describe components, variants, and states without depending on page structure.
- 3CSS ID SelectorUnderstand how ID selectors target unique elements, why their high specificity is difficult to override, and when another selector is preferable.
- 4CSS Universal SelectorUse the universal selector deliberately for box-sizing resets, scoped defaults, and namespace-aware matching without applying unnecessary rules everywhere.
- 5CSS Group SelectorCombine selectors into a selector list when several elements share declarations, while understanding how one invalid selector can affect the rule.
- 6CSS CombinatorsCSS Combinators are used to define relationships between selectors.
- 7CSS Attribute SelectorsCSS Attribute Selectors are used to select HTML elements based on their attributes or attribute values.
- 8CSS Pseudo ClassesCSS Pseudo Classes are used to define a special state of an HTML element.
- 9CSS Pseudo ElementsCSS Pseudo Elements are used to style specific parts of an HTML element.