CSS Combinators

Combinators maintain relationship between two selectors in different ways like targeting the child, parent, siblings.

There can be more than one simple selector in a CSS selector, and between these selectors, we can include a combinator.

There are 4 ways to make different combinations:-


General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified element. It uses tilde(~) symbol to specify the selector.

element ~ element {  
   /*style properties*/  
}  

It is useful when we have to select the siblings of an element even if they are not adjacent directly.

Input:-

Index.html
	
<body> 
	 <p>Paragraph 1</p>
	 <p>Paragraph 2</p>
	 <div>
	   <p>Paragraph 3</p>
	 </div>
	 <p>Paragraph 4</p>
	 <h1>Heading 1</h1>
   <p>Paragraph 5</p>
</body>

Style.css
div ~ p {
    background: #ccc;
}

Output:-


Adjacent Sibling Selector

The adjacent sibling selector matches the second element only when the element immediately follows the first element, and both of them are the children of the same parent. This sibling selector selects the adjacent element, or we can say that the element which is next to the specified tag.

It uses plus(+) symbol to specify the selector.

element + element {  
   /*style properties*/  
}  

 It only selects the element which is just next to the specified first element

Input:-

Index.html
	
<body> 
	 <p>Paragraph 1</p>
	 <p>Paragraph 2</p>
	 <div>
	   <p>Paragraph 3</p>
	 </div>
	 <p>Paragraph 4</p>
	 <h1>Heading 1</h1>
   <p>Paragraph 5</p>
</body>

Style.css
div + p {
    background: #ccc;
}

Output:-


Child Selector

The child selector selects the direct descendant of the parent. This combinator only matches the elements that are the immediate child in the document tree.

It uses plus(>) symbol to specify the selector.

element > element {  
   /*style properties*/  
}  

The parent element must always be placed at the left of the “>”. If we remove the greater than (>) symbol that designates this as a child combinator, then it will become the descendant selector.

Input:-

Index.html
	
<body> 
	 <p>Paragraph 1</p>
	 <p>Paragraph 2</p>
	 <div>
	   <p>Paragraph 3</p>
	 </div>
	 <p>Paragraph 4</p>
	 <h1>Heading 1</h1>
   <p>Paragraph 5</p>
</body>

Style.css
div > p {
    background: #ccc;
}

Output:-


Descendant Selector

The descendant selector is used to match the descendant elements of a particular element. It uses space to specify the selector.

The word descendant indicates nested anywhere in the DOM tree. It can be a direct child or deeper than five levels, but it will still be referred to as a descendant.

element element {  
   /*style properties*/  
}  

It combines two selectors in which the first selector represents an ancestor (parent, parent’s parent, etc.), and the second selector represents descendants.

Input:-

Index.html
	
<body> 
	 <p>Paragraph 1</p>
	 <p>Paragraph 2</p>
	 <div>
	   <p>Paragraph 3</p>
	 </div>
	 <p>Paragraph 4</p>
	 <h1>Heading 1</h1>
   <p>Paragraph 5</p>
</body>

Style.css
div p {
    background: #ccc;
}

Output:-