CSS · Layout and visual systems
What are CSS combinators?
Short answer
Combinators describe relationships between selectors: descendant, direct child, adjacent sibling and general sibling. They add no specificity themselves.
A combinator sits between two simple selectors. It changes which elements match based on their position in the DOM, not based on class names or attributes.
.nav a { }
.nav > a { }
h2 + p { }
h2 ~ p { }The four common combinators
- Space is the descendant combinator: any depth inside the ancestor
- > is the child combinator: only direct children
- + is the adjacent sibling combinator: the next sibling of the same parent
- ~ is the general sibling combinator: any later sibling of the same parent
Combinators do not add specificity. A selector with a child combinator is not more specific than the same selector with a descendant combinator. The specificity comes from the simple selectors on either side.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the difference between the child and descendant combinators?
- 2How does the adjacent sibling combinator differ from the general sibling combinator?
- 3Do combinators affect specificity?
- 4Why can deep descendant selectors be fragile?
Say it in the interview
Combinators express relationships between elements. A space matches any descendant, the greater-than sign matches direct children, plus matches the next sibling, and tilde matches any later sibling. They do not add specificity themselves. I keep selectors shallow because deep descendant chains break when the DOM structure changes.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.