What are CSS combinators? How many types of CSS combinators are there?

0-2 years experience

1. 1You need to style only the direct child <li> elements inside a <ul class="menu">. Which combinator would you use and how would you write the selector?
2. 2If you have a <div> with several <p> elements and you want to style any <p> that follows another <p> directly, which combinator helps you achieve that?
3. 3What would change if you used a descendant combinator instead of the child combinator in the first scenario?

2-5 years experience

1. 1A form contains inputs that can get an 'error' class. We need to disable the submit button only when an error input exists anywhere in the same form. How would you rewrite the selector using combinators to target the button correctly?
2. 2A style meant for navigation links inside a header is also affecting links in the footer. Explain how you would narrow the selector with combinators to affect only the header links.
3. 3Your team added a utility class that uses the adjacent sibling (+) combinator, but it fails when there are whitespace text nodes between elements. What might be causing this and how would you fix it?

5-8 years experience

1. 1Our design system has deep component hierarchies, and we notice descendant combinators causing performance regressions on large pages. How would you assess the impact and refactor selectors to improve rendering speed?
2. 2We want to ban the general sibling (~) combinator because it leads to unpredictable styling with dynamic content. How would you redesign the component CSS to avoid it while keeping layout flexibility?
3. 3When migrating a legacy codebase to CSS‑in‑JS, you need to translate complex selector chains that include child and descendant combinators. What strategy ensures identical behavior and maintainability after the migration?

8+ years experience

1. 1Multiple product front‑ends have used different combinator patterns, causing selector conflicts and specificity wars. As a staff engineer, how would you define a cross‑team CSS architecture policy around combinator usage to minimize conflicts and support long‑term scalability?
2. 2We are moving from a monolithic stylesheet to a modular, token‑driven system and want to replace deep descendant selectors with explicit combinators for better maintainability. What process and tooling would you put in place to audit, refactor, and prevent regressions across all teams?
3. 3A feature flag toggles insertion of new DOM elements that affect existing sibling combinator selectors. How would you design the CSS and the flag implementation to avoid breaking styles when the flag is turned on or off in production?