A Complete Guide to CSS Combinators

Hi Guys, In this blog we are going to understand the CSS combinators.

The first question rises what are the CSS Combinators?

We can say that a combinator is something that defines the relation between the CSS selectors.

Combinators are of four types:

• Descendant Selector
• Child Selector
• Adjacent Sibling Selector
• General Sibling Selector

Descendant Selector : It is generally denoted by (space), this selector will match all the elements that are descendant of a particular element.

A basic usage of Descendant Selector is :

 .main p{
	font-size: 15px;
}
 

The above property will apply to all the p elements inside the div with class main.
 

Child Selector : It is generally denoted by (>), this selector will select the immediate children of a particular element.

A basic usage of Child Selector is :

 .main > p{
	font-size: 15px;
}
 

The above property will apply only to the first and second p element as the third element is directly not the p element, So this property will not apply to the third element.

Adjacent Sibling Selector : This selector is generally denoted by (+), this selector will select all the elements that are adjacent siblings of a particular element.

 .main + p{
	font-size: 15px;
}
 

The above properties will apply to the p element which is just after the div with class main.

General Sibling Selector : This selector is generally denoted by (~), this selector will select all the elements that are siblings of a particular element.

.main ~ p {
	font-size: 15px;
}
 

The above properties will apply to the p element that is outside the div or we can say that the sibling.

These are the basics of CSS Combinators, hope they are useful.