What is the descendant combinator in CSS?

0-2 years experience

1. 1You have a <nav> with <ul> and <li> elements. How would you write CSS to style only the <a> tags inside those <li> without affecting other links on the page?
2. 2If you write `.card .title { color: red; }`, which elements will this rule apply to?
3. 3What difference does a space make in `.button .active` versus `.button.active`?

2-5 years experience

1. 1A teammate says the rule `.sidebar .menu-item` is also styling items in the header. Walk me through how you'd debug and fix the selector.
2. 2You need to style all inputs inside a main form but not those inside a modal that also contains a form. How would you structure your selectors using descendant combinators?
3. 3After adding a new component, page load slows down and you suspect CSS. Explain how deep descendant selectors could impact performance and what alternatives you might consider.

5-8 years experience

1. 1Our design system mixes BEM naming with descendant selectors for theming. Discuss the trade‑offs of using deep descendant selectors in a large codebase regarding specificity, maintainability, and render performance.
2. 2We’re refactoring a legacy stylesheet that heavily uses selectors like `.header .nav .item`. How would you rewrite these to improve modularity while preserving the visual look?
3. 3Describe how the browser matches descendant selectors and the effect on paint time in a page with 10,000 DOM nodes. What strategies would you use to mitigate any performance hit?

8+ years experience

1. 1Our organization is moving from monolithic CSS files to a component‑scoped CSS‑in‑JS approach. How would you decide whether to keep existing descendant combinator selectors or replace them, considering cross‑team ownership and future scalability?
2. 2During a migration to a design‑token system, you need to ensure global descendant selectors don’t unintentionally override component styles. What architectural guidelines would you set to manage selector scope and avoid cascade conflicts?
3. 3If you had to design a CSS architecture for a multi‑team product that must support legacy pages using deep descendant selectors and new pages using utility classes, how would you structure the stylesheet hierarchy and build process to keep them compatible yet isolated?