What is the syntax for a combinator selector?

0-2 years experience

1. 1How would you write a selector to target only <li> elements that are direct children of a <ul>?
2. 2If you need a style to apply to an <a> element that immediately follows an <h2>, what selector would you use?
3. 3What elements are matched by the selector `div > p span`?

2-5 years experience

1. 1A rule using `.card > .title` isn’t applying in some parts of the page. Walk me through how you’d debug the selector hierarchy.
2. 2When refactoring a component you replace a descendant selector with a child selector. What trade‑offs are you considering regarding specificity and performance?
3. 3A teammate reports that an adjacent sibling selector (`+`) is unexpectedly affecting elements added later via JavaScript. How would you investigate and fix it?

5-8 years experience

1. 1In a large web app with thousands of CSS rules, many using combinators, how would you audit and optimise selector usage to reduce render‑time cost?
2. 2Design a CSS architecture for a multi‑team product where only certain combinators are allowed in shared component libraries. What guidelines and tooling would you put in place?
3. 3You need to support legacy browsers that don’t handle the general sibling selector (`~`). How would you rewrite the styles while preserving the visual hierarchy?

8+ years experience

1. 1Your organization is migrating from a monolithic stylesheet to a CSS‑in‑JS solution. How would you handle existing combinator selectors to keep them maintainable across teams?
2. 2When planning a long‑term UI framework, what considerations would you make about using combinator selectors versus utility‑first classes to balance developer ergonomics and performance?