CSS Combinator defines the relationship between the selectors. A CSS Combinator can be used between two CSS Selectors. There are 4 types of CSS Combinators.
Table of Contents
Descendant Combinator (space)
The Descendant Combinator selects all HTML Elements that are descendants of a specified element.
div a {
color: red;
}
The above example will select all anchor elements that are descendants of Div element or that are inside Div element.
Child Combinator (>)
The Child Combinator (>) selects all HTML Elements that are children of a specified element.
div > p {
font-size:20px;
}
The above example will select all paragraph elements that are children of Div element.
Adjacent Sibling Combinator (+)
The Adjacent Sibling Combinator (+) selects the immediately following specified HTML Element after another specified element, Both element must be children of the same parent element or they must be siblings.
div + p {
background-color: red;
}
The above example will select the first paragraph element that is placed immediately after Div element and is also it's sibling.
General Sibling Combinator (~)
The General Sibling Combinator (~) selects all specified HTML Elements that are placed after another specified element and they must be children of the same parent element.
div ~ p {
background-color: blue;
}
The above example will select all paragraph elements that are sibling of div element and are placed after div element.