Pseudo classes

Summary

Selectors like `:hover`, `:focus`, `:nth-child()` and `:not()` that target elements based on state or position, without adding extra markup or classes. Pseudo-classes are particularly important for interactive accessibility because visible focus, disabled states, validation states, and logical selection states should be communicated without extra markup.

• 1Style `:hover`, `:focus` and `:active` states for every interactive element. Validate your understanding by applying it in a small practical example.
• 2Use `:nth-child(odd)` to zebra-stripe a table without extra classes. Verify the behavior with realistic data and handle the failure or empty state as well.
• 3Learn `:not()` and `:has()` for more advanced, markup-free targeting.