CSS selectors
This course covers CSS selectors, the patterns a browser matches against elements in an HTML page. It starts with how CSS reaches a page and the shape of a rule. It then covers type, class and ID selectors, grouping with commas, and the four combinators. Attribute selectors, pseudo-classes for state and position, and pseudo-elements such as ::before and ::after follow. The last lesson styles an accessible signup form without changing its markup, using each technique in turn.
What you'll learn
- ✓How CSS rules reach a page and how a rule is structured
- ✓Type, class and ID selectors and when to use each
- ✓Grouping selectors and the descendant, child and sibling combinators
- ✓Attribute selectors for presence, exact and partial matches
- ✓Pseudo-classes for interaction, form state and sibling position
- ✓Pseudo-elements for generated content, text slices and placeholders
What CSS does: connecting style to HTML
Open any lesson from this series in a browser and you'll notice something: it looks plain. Black text, blue links, a default serif font, form controls in whatever style your operating system ships. That's not a bug in your markup, it's the browser's own built-in stylesheet, the same one every…
Read the full lesson free →Curriculum
7 lessonsWhat CSS does: connecting style to HTML
Explains what CSS does, the three ways to add it to a page, and the parts of a rule.
Type, class, and ID selectors
Covers type, class and ID selectors, how each matches elements, and why classes are the default choice.
Grouping and combinators
Shows comma grouping and the descendant, child, adjacent sibling and general sibling combinators, read right to left.
Attribute selectors
Teaches matching elements by attribute presence, exact value, start, end or contained text, and case-insensitive matching.
Pseudo-classes: state and structure
Covers pseudo-classes for hover, focus and press states, form control states, and position among siblings.
Pseudo-elements: ::before and ::after
Explains ::before and ::after with the required content property, plus ::first-line, ::first-letter and ::placeholder.
Putting it together: styling the signup form
Styles an accessible signup form with type, class, attribute, pseudo-class and pseudo-element selectors, including :user-invalid and :has(), without changing its HTML.