> For the complete documentation index, see [llms.txt](https://bharat-tiwari.gitbook.io/our-tech-journal/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bharat-tiwari.gitbook.io/our-tech-journal/css/css-selector-combinators.md).

# CSS Selector: Combinators

<mark style="color:purple;">A CSS combinator is something that explains the relationship between two selectors.</mark>

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

* descendant selector (space)
* child selector (>)
* adjacent sibling selector (+)
* general sibling selector (\~)

<table><thead><tr><th>Selector</th><th width="145.33333333333331">Example</th><th>Example description</th></tr></thead><tbody><tr><td><a href="https://www.w3schools.com/cssref/sel_element_element.asp"><em>element element</em></a></td><td>div p</td><td>Selects all &#x3C;p> elements inside &#x3C;div> elements</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_element_gt.asp"><em>element>element</em></a></td><td>div > p</td><td>Selects all &#x3C;p> elements where the parent is a &#x3C;div> element</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_element_pluss.asp"><em>element+element</em></a></td><td>div + p</td><td>Selects the first &#x3C;p> element that are placed immediately after &#x3C;div> elements</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_gen_sibling.asp"><em>element1~element2</em></a></td><td>p ~ ul</td><td>Selects every &#x3C;ul> element that are preceded by a &#x3C;p> element</td></tr></tbody></table>