Overview
-
Explore the different types of CSS selectors and learn how to choose the best selectors for targeting different HTML elements.
Syllabus
-
Introduction
- The power of selectors
- CSS terminology
- Simple selectors: Elements, classes, and IDs
- Groups of selectors
- Compound selectors
- The HTML family tree: Parents, children, ancestor, descendant, siblings
- Descendant selectors
- Parent-child selectors
- Adjacent and general sibling selectors
- Reading and writing selectors
- Simple attribute selectors
- Exact and partial attribute value selectors
- Beginning, ending, and arbitrary substring attribute value selectors
- Cool attribute selector tricks
- Pseudo-classes you already know, :link, :visited, :hover, :active, :focus
- Understanding only selectors, :only-child, :only-of-type
- Understanding first and last selectors, :first-child, :first-of-type, :last-child, :last-of-type
- Understanding nth selectors – :nth-child, :nth-of-type, :nth-last-child, :nth-last-of-type
- Pseudo-classes mostly for forms, :checked; :required and :optional; :enabled and :disabled
- Pseudo-classes for in-page navigation, :target
- Understanding :not
- :root and :empty
- Meet the pseudo-elements ::before, ::after, ::first-line, ::first-letter
- *, the universal selector
- CSS selectors and browser support
- Why can't I use CSS classes exclusively? Selectors best practices
- Impact of CSS selectors on performance
- Additional CSS practice
