What is a CSS selector?
A CSS selector is a pattern used to select and target HTML elements so that styles can be applied to them. It tells the browser which elements on the page should be affected by the CSS rules associated with the selector.
- 1
Universal Selector (*): Targets all elements on the page.
- 2
Element Selector (e.g., p, h1): Targets all instances of a specific HTML element.
- 3
Class Selector (.class-name): Targets elements with a specific class attribute.
- 4
ID Selector (#id-name): Targets a specific element with a unique ID.
- 5
Group Selector (e.g., h1, p, div): Applies the same style to multiple elements.
- 6
Descendant Selector (e.g., div p): Targets elements inside a specific parent.
- 7
Child Selector (e.g., div > p): Targets direct children only.
- 8
Attribute Selector (e.g., input[type='text']): Targets elements based on attributes.
- 9
Pseudo-class Selector (e.g., a:hover): Targets elements in a specific state.
- 10
Pseudo-element Selector (e.g., p::first-line): Styles specific parts of an element.
Scenario Questions
0-2 years experience
- 1You need to style only the first paragraph inside a div with class "article". How would you write the selector?
- 2If you add a new class to a button but the existing styles aren't applying, what could be wrong with your selector?
- 3How would you select all list items that are direct children of an unordered list with id "menu"?
2-5 years experience
- 1We have a button that should change color on hover, but the hover style isn’t taking effect. Walk me through how you’d debug the selector issue.
- 2Your team wants to reuse a set of styles across multiple pages, but the current selector is too specific and overrides other styles. How would you refactor it?
- 3Explain why a selector you wrote stopped working after a new CSS file was added to the project.
5-8 years experience
- 1In a large application, you notice CSS selector performance is degrading page load times. What strategies would you use to audit and improve selector efficiency?
- 2Our design system uses BEM naming, but we’re seeing unexpected style collisions due to selector specificity. How would you address this at the component level?
- 3When migrating from a monolithic stylesheet to a CSS‑in‑JS solution, what considerations around selector generation and specificity should you keep in mind?
8+ years experience
- 1We need to standardize styling across dozens of micro‑frontends that each have their own CSS pipelines. How would you design a selector strategy that minimizes conflicts and supports independent deployment?
- 2Our legacy codebase mixes global selectors with scoped modules, causing maintenance headaches. Describe a migration plan to a scalable architecture, including how you’d handle selector refactoring.
- 3If you were to introduce a utility‑first framework like Tailwind across the organization, what impact would that have on selector design and how would you manage the transition?
Follow-up Questions
- Can you give a concrete example of that selector?
- What trade‑offs does this approach have?
- How would you verify it works in the browser?