CSS: Selectors

Learn how to leverage the power of selectors to select the elements you want to style without adding classes, changing HTML, or getting overly specific with your selectors.

Introduction

• The power of selectors

1. Review of Basic CSS

• CSS terminology
• Type selectors, classes, and IDs
• Selector lists
• Compound selectors

2. Combinator Selectors

• The HTML family tree: Parents, children, ancestor, descendant, and siblings
• Descendant selectors
• Parent-child selectors
• Adjacent and general sibling selectors
• Reading and writing selectors

3. Attribute Selectors

• Simple attribute selectors
• Exact and partial attribute value selectors
• Beginning, ending, and arbitrary substring attribute value selectors
• Cool attribute selector tricks

4. Pseudo-classes for document structures

• 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
• :root and :empty

5. Pseudo-classes for links

• Basic link states: :link, :visited, :hover, :active
• :any-link for combining link states
• Pseudo-classes for in-page navigation, :target
• Accessibility pseudo-classes: :focus, :focus-within

6. Pseudo-classes for forms

• Form controls: :required and :optional; :enabled and :disabled
• Form controls: :read-only and :read-write
• Form control states: :indeterminate, :default, :checked
• Text fields: :autofill, :placeholder-shown
• Error checking: :valid, :invalid, :in-range, :out-of-range

7. Additional pseudo-classes, pseudo-elements, and the universal selector

• Comparing is() and where()
• Understanding :not
• :has()
• Meet the pseudo-elements ::before, ::after, ::first-line, ::first-letter
• *, the universal selector

8. Choosing Selectors

• CSS selectors and browser support
• Why can't I use CSS classes exclusively? Selectors best practices
• Impact of CSS selectors on performance

Conclusion

• Additional CSS practice