CSS Combinators Reference
CSS Combinators
A combinator is a sign that explains the relationship between selectors.
Between the simple selectors, we can include a combinator.
The table below shows the different combinators in CSS:
Name | Sign | Example | Example Result |
---|---|---|---|
Child combinator | > | div > p | Selects every <p> element that are direct children of a <div> element |
Descendant combinator | (single space) | div p | Selects all <p> elements inside <div> elements |
Namespace separator | | | ns | h2 | Selects all <h2> elements in namespace ns |
Next-sibling combinator | + | div + p | Selects the first <p> element that is placed immediately after <div> elements |
Selector list | , | div, p | Selects all <div> elements and all <p> elements |
Subsequent-sibling combinator | ~ | p ~ ul | Selects every <ul> element that is preceded by a <p> element |