hey @kartik,
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
Generally,there are four different combinators in CSS/CSS5:
1.descendant selector (space)
2.child selector (>)
3.adjacent sibling selector (+)
4.general sibling selector (~)
Descendant Selector:
The descendant selector matches all element that are descendants of a specified element.
Example
<style type="text/css">
div span {
background-color:red;
color:Blue;
}
</style>
Child Selector:
The child selector selects all elements that are the immediate children of a specified element.
Example
<style type="text/css">
div > span {
font-size:20px;
background-color:blue;
color:red;
}
</style>
Selects all <span> elements that are immediate children of a <div> elements.
Adjacent Sibling Selector:
The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.
Sibling elements must have the same parent element, and "adjacent" means "immediately following".
Example
<style type="text/css">
div + span {
font-size:20px;
background-color:green;
color:blue;
}
</style>
Selects all <span> elements that are siblings of <div> elements.
General Sibling Selector:
The general sibling selector selects all elements that are siblings of a specified element.
The following example selects all <p> elements that are siblings of <div> elements:
Example
div ~ p {
background-color: green;
}
