CSS COMBINATORS
CSS combinators is a combination of two or more other selectors and creates a relationship between them. The combinators also provide location of the content in the HTML document and is used to target specific elements to style.
There are four types of selector in CSS:
1).Descendant selector
The descendant selector selects all the elements that are children of specified previous selectors.
This combinator is written by a combination of other selectors separated by space.
Example - div ul li This will select all li elements which are nested inside ul and ul is nested inside div elements.
2).Adjacent sibling
The adjacent selector selects the elements that are adjacent to the specified selector. Here adjacent means immediately after the specified selector.
This combinator is written by a combination of other selectors separated by plus (+).
Example - h2 + p This will select p element if it is immediately after h2 element.
3).Child selector
The child selector selects all the elements that are the child of the specified selector. Here adjacent means immediately after the specified selector.
This combinator is written by combination of other selectors and greater than (>) symbols in between.
Example - div > p This will select div as parent and select all the p elements that are their own children of it.
4).General sibling selector
The general sibling selector selects all the sibling elements that follows the first selector element.
This combinator is written by combination of other selectors and tilde (~) symbol in between.
Example - div ~ p This will select p element that are siblings of div element.