TUTORIAL HOME
CSS Combinators
❮ Previous Next ❯
CSS Combinators
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.
There are four different combinators in CSS3:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
Descendant Selector
The descendant selector matches all elements that are descendants of a specified element.
The following example selects all
elements inside
Example
div p {
background-color: yellow;
}
»
Child Selector
The child selector selects all elements that are the immediate children of a specified element.
The following example selects all
elements that are immediate children of a
Example
div > p {
background-color: yellow;
}
»
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”.
The following example selects all
elements that are placed immediately after
Example
div + p {
background-color: yellow;
}
»
General Sibling Selector
The general sibling selector selects all elements that are siblings of a specified element.
The following example selects all
elements that are siblings of
Example
div ~ p {
background-color: yellow;
}
»
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
❮ Previous Next ❯
shahzade bau 