CSS: Selectors

Explore the different types of CSS selectors and learn how to choose the best selectors for targeting different HTML elements.

Introduction

• The power of selectors

1. Review of Basic CSS

• CSS terminology
• Simple selectors: Elements, classes, and IDs
• Groups of selectors
• Compound selectors

2. Combinator Selectors

• The HTML family tree: Parents, children, ancestor, descendant, 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, Pseudo-Elements, and the Universal Selector

• 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

5. 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