CSS Combinators
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });
CSS Combinators
❮ Previous
Next ❯
CSS Combinators
A combinator is something that explains the relationship between the selectors.
<!--
Select all <p> elements inside the <div> element:
Paragraph 1 in the div.
Paragraph 2 in the div.
Paragraph 3. Not in a div.
-->
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 CSS:
- 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 <p> elements inside <div> elements:
Example
div p {
background-color: yellow;
}Try it Yourself »
Child Selector
The child selector selects all elements that are the immediate children of a
specified element.
The following example selects all <p> elements that are immediate
children of a <div>
element:
Example
div > p {
background-color: yellow;
}Try it Yourself »
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });
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 <p> elements that are placed immediately after <div> elements:
Example
div + p {
background-color: yellow;
}Try it Yourself »
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: yellow;
}Try it Yourself »
Test Yourself with Exercises!
Exercise 1 »
Exercise 2 »
Exercise 3 »
Exercise 4 »
❮ Previous
Next ❯