In this article, I will discuss CSS Combinators. ### **Table Of Contents** * [Descendant combinator](#chapter-1) * [Child combinator](#chapter-2) * [Adjacent sibling combinator](#chapter-3) * [General sibling combinator](#chapter-4) ### Descendant combinator The descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors. ```html

Text in .box

Text not in .box

``` ```css /* This is descendant combinator example */ .box p { color: red; } ``` --- ### Child combinator The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Descendent elements further down the hierarchy don't match. ```html

Unordered item
Unordered item
1. Item 1
2. Item 2

``` ```css /* this is child combinator example */ ul > li { border-top: 5px solid red; } ``` --- ### Adjacent sibling combinator The adjacent sibling selector (+) is used to select something if it is right next to another element at the same level of the hierarchy ```html

A heading

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

``` ```css /* this is adjacent sibling combinator example */ h1 + p { font-weight: bold; background-color: #333; color: #fff; padding: .5em; } ``` --- ### General sibling combinator If you want to select siblings of an element even if they are not directly adjacent, then you can use the general sibling combinator (~). To select all img elements that come anywhere after p tag. ```html

A heading

I am a paragraph.

I am a div

I am another paragraph.

``` ```css /* this is general sibling combinator example*/ h1 ~ p { font-weight: bold; background-color: #333; color: #fff; padding: .5em; } ``` --- #Thanks for reading... Original article [Click here](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators)

csscombinators

CSS Combinators

Join Our Newsletter. No Spam, Only the good stuff.