How does the descendant combinator differ from a direct child combinator? Write an example of a descendant combinator selector. What is the impact of using multiple descendant selectors in a chain?

We have a navigation bar with <ul><li> items and you need to style all <a> tags inside any <li>. How would you write the selector? What would happen if you used a child combinator instead?

Given HTML <div class='card'><p><span>Text</span></p></div>, you want to target the <span>. Write a selector using a descendant combinator and explain why it works.

Your team added a new component inside a modal, and the existing CSS rule '.modal .content p' stopped applying. Walk me through how you would debug the selector chain and decide whether to use a descendant or child combinator.

We need to style all buttons inside any form, but exclude buttons that are direct children of the form. How would you craft the selector, and what trade‑offs does this introduce for maintainability?

In a large e‑commerce site, you notice that deep descendant selectors like '.catalog .category .item .price' are causing rendering slowdowns on low‑end devices. How would you assess the performance impact and refactor the CSS architecture?

Your design system enforces a rule to avoid more than three levels of descendant selectors. Explain how you would enforce this rule across multiple teams and what fallback strategies you’d use if a legacy component violates it.

Our company is migrating a monolithic CSS codebase to a utility‑first framework. How would you handle existing complex descendant selector chains to ensure they don’t break the new system, and what long‑term strategy would you propose for selector hygiene?

Cross‑team, we have a shared component library where some components rely on deep descendant selectors for theming. Discuss the architectural implications of keeping those selectors versus refactoring to CSS custom properties or BEM, considering future scalability.