What happens if you use a combinator between unrelated elements?

0-2 years experience

1. 1If you write `.header > .footer { … }` but `.footer` is not a child of `.header` in the markup, what will the browser do?
2. 2How would the style behave when you use the adjacent sibling combinator `+` between a `<label>` and a `<button>` that are not siblings?
3. 3What happens when you target `ul ~ p` but there is no `<p>` element after any `<ul>` on the page?

2-5 years experience

1. 1You notice a rule using `.nav + .content` isn’t taking effect. Walk me through how you’d debug why it’s not applying.
2. 2In a component that sometimes renders a `<header>` and sometimes a `<section>`, you used a child combinator between them. What pitfalls does this create when the DOM structure changes?
3. 3If page load times are high and you suspect selector performance, how could using combinators between unrelated elements contribute to the slowdown?

5-8 years experience

1. 1In a large single‑page app with a global stylesheet, how would you refactor selectors that combine unrelated elements to improve maintainability and rendering performance?
2. 2When building a theming system that injects CSS at runtime, what issues arise if you generate selectors assuming a parent‑child relationship that doesn’t exist?
3. 3Design a lint rule to catch misuse of combinators across the codebase. What edge cases must the rule handle to avoid false positives?

8+ years experience

1. 1Your organization is migrating from CSS modules to a utility‑first design system. How would you handle existing selectors that misuse combinators between unrelated elements to avoid breaking legacy pages?
2. 2At a cross‑team level, what guidelines and tooling would you put in place to prevent combinator misuse in a monorepo with many UI teams?