Can you list all the types of CSS combinators?

0-2 years experience

1. 1Imagine you have a navigation menu where you want to style only the direct list items of a '.nav-menu' class, but not the nested list items inside sub-menus. How would you write that selector, and what would happen if you accidentally used a space instead of a '>'?
2. 2We have a form where we want to highlight an error message container (a div) that immediately follows an invalid input field. How would you target that error container using CSS without adding a new class to it?

2-5 years experience

1. 1We're building a dynamic accordion component. When a panel is expanded, we want to style all subsequent sibling panels differently to dim them out. However, our current CSS is styling every panel in the accordion instead of just the ones after the active one. How would you debug this using sibling combinators, and what's the difference between '+' and '~' in this context?
2. 2A developer on your team wrote a selector like '.card .header .title span'. It's causing regression issues because it's styling spans inside nested cards too. How would you refactor this selector using child combinators to make it more robust and prevent style leakage?

5-8 years experience

1. 1In a large-scale design system, we want to implement a 'Stack' component that automatically adds spacing between its direct children, but only if there is another child preceding it (to avoid margin collapse issues). How would you design this spacing utility using combinators, and how do you ensure it doesn't break when nested components introduce their own internal margins?
2. 2We are experiencing rendering performance bottlenecks on a highly dynamic, infinite-scroll feed page with thousands of DOM nodes. Profiling shows significant time spent in 'Recalculate Style'. We found several selectors like '.feed-container * > div ~ p'. How would you analyze the performance impact of these combinators, and how would you refactor them to optimize browser style computation?

8+ years experience

1. 1You are migrating a legacy monolithic frontend with deeply nested CSS selectors (using heavy descendant combinators) to a modern, federated Micro-Frontend architecture. How do you establish CSS scoping boundaries and linting rules to prevent global style pollution caused by loose combinators, without forcing teams to rewrite all their legacy stylesheets overnight?
2. 2When defining the CSS architecture for a multi-brand design system, some teams advocate for a utility-first approach (like Tailwind) while others prefer semantic CSS with complex combinators to keep the HTML clean. How do you evaluate these two paradigms in terms of long-term maintainability, browser performance at scale, and developer velocity, and what architectural guidelines would you establish?