Multiple combinators can be chained together in a single CSS rule to target elements based on complex relationships in the DOM. This is useful for real-world scenarios like styling navigation menus, forms, or nested content without adding extra classes.

Key Points

1
Chaining combinators increases selector specificity and allows precise targeting of elements.
2
Helps reduce additional HTML classes, keeping markup clean and semantic.
3
Useful for responsive designs, component libraries, and structured layouts.

Example: Multiple Combinators

Difficulty: 5/10

Topics: CSS selectors, combinators, specificity

Scenario Questions

0-2 years experience

1
We have a navigation bar where only the direct child links that appear immediately after another link should get a left margin. How would you write a single CSS rule using multiple combinators to achieve this?
2
You need to style every list item in an ordered list except the first one, adding a top border. Which combinators would you combine in one selector, and what would the selector look like?

2-5 years experience

1
A dropdown menu's hover effect stopped working after a teammate added a new submenu. The selector uses both a child (>) and an adjacent sibling (+) combinator. Walk me through how you'd debug why the rule no longer applies.
2
When building a themable card component, you used a selector that chains descendant and general sibling (~) combinators to target the badge element. Explain the trade‑offs of this approach versus adding a dedicated class to the badge.

5-8 years experience

1
Our product grid uses a selector like .grid > .item .price ~ .discount to style discounted prices. Discuss the performance impact of such a long combinator chain on a page with thousands of items and propose a refactor.
2
Design a CSS architecture for a component library where you must style elements based on their relationship without extra markup. How would you employ multiple combinators, and what guidelines would you set to keep selectors readable and low‑specificity?

8+ years experience

1
The company is moving from a monolithic stylesheet to a CSS‑in‑JS solution. How would you translate complex selectors that use multiple combinators to ensure identical behavior, and what processes would you put in place to avoid future selector bloat?
2
Multiple teams have created overlapping selectors with various combinator chains, leading to specificity wars. Propose a cross‑team policy and tooling strategy to standardize the use of multiple combinators across the codebase.

Follow-up Questions

❓What would happen to the rule's specificity if you added an ID selector inside the same chain?
❓Can you rewrite the same styling using a utility class instead of combinators, and why might you choose one approach over the other?
❓How does the order of combinators in a selector impact which elements are matched?