What is the syntax of a pseudo-class in CSS?

0-2 years experience

1. 1We need a button that changes background when the user hovers over it. Show me the CSS selector you’d write and explain the pseudo‑class syntax you used.
2. 2If you want to style only the first item in an unordered list, which pseudo‑class would you pick and how would you write the selector?
3. 3What happens if you accidentally omit the colon before a pseudo‑class in a selector? How would the browser interpret it?

2-5 years experience

1. 1Our navigation menu adds an 'active' class to the current link, but the design team prefers a CSS‑only solution. How would you use a pseudo‑class to highlight the active link, and what syntax pitfalls might cause it to break in older browsers?
2. 2A teammate reports that ':focus-visible' styles aren’t applying on Chrome. Walk me through how you’d check the selector syntax and debug the issue.
3. 3You need to style every odd row in a table using a pseudo‑class. Write the selector and discuss any specificity or ordering concerns with existing table styles.

5-8 years experience

1. 1Our design system relies on a utility‑first framework, but we need a custom ':loading' pseudo‑class that applies several properties. How would you structure the selector syntax to keep it maintainable and avoid specificity wars across the component library?
2. 2We’re refactoring a legacy codebase that heavily uses ':nth-child' for layout. What performance implications does that pseudo‑class syntax have, and how would you redesign the selectors for better rendering at scale?
3. 3When supporting both light and dark themes, we want to combine ':root' custom properties with ':hover' pseudo‑classes. Explain how you’d write those selectors and any syntax pitfalls that could affect theme switching.

8+ years experience

1. 1Our organization is moving from CSS‑in‑JS to pure CSS and must decide whether interactive states stay in JavaScript or shift to pseudo‑classes. Discuss the architectural trade‑offs, focusing on pseudo‑class syntax, maintainability, and cross‑team consistency.
2. 2A cross‑functional team wants a company‑wide style guide for pseudo‑class usage to reduce duplication. How would you define the correct syntax, naming conventions, and fallback strategies for browsers lacking support?
3. 3We have a global ':focus' rule for accessibility, but some components override it with higher specificity. Propose a strategy using modern selector syntax (e.g., :where, :is) to enforce the base styles without breaking existing overrides.