CSS Combinators
Posted: Fri Oct 27, 2023 8:23 am
CSS Combinators
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 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 children of a
specified element.
The following example selects all <p> elements that are
children of a <div>
element:
Example
div > p { background-color: yellow;}
Try it Yourself »
Adjacent Sibling Selector (+)
The adjacent sibling selector is used to select an element that is directly
after another specific element.
Sibling elements must have the same parent element, and "adjacent" means
"immediately following".
The following example selects the first <p> element 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 next siblings of a specified element.
The following example selects all <p> elements that are next siblings of <div> elements:
Example
div ~ p { background-color: yellow;}
Try it Yourself »
Test Yourself With Exercises
Exercise:
Change the color of all <p> elements, that are descendants of <div> elements, to "red".
<style>
{
color: red;
}
</style>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
Submit Answer »
Start the Exercise
All CSS Combinator Selectors
Selector
Example
Example description
element element
div p
Selects all <p> elements inside <div> elements
element>element
div > p
Selects all <p> elements where the parent is a <div> element
element+element
div + p
Selects the first <p> element that are placed immediately after <div> elements
element1~element2
p ~ ul
Selects every <ul> element that are preceded by a <p> element
★
+1
Reference: https://www.w3schools.com/css/css_combinators.asp
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 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 children of a
specified element.
The following example selects all <p> elements that are
children of a <div>
element:
Example
div > p { background-color: yellow;}
Try it Yourself »
Adjacent Sibling Selector (+)
The adjacent sibling selector is used to select an element that is directly
after another specific element.
Sibling elements must have the same parent element, and "adjacent" means
"immediately following".
The following example selects the first <p> element 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 next siblings of a specified element.
The following example selects all <p> elements that are next siblings of <div> elements:
Example
div ~ p { background-color: yellow;}
Try it Yourself »
Test Yourself With Exercises
Exercise:
Change the color of all <p> elements, that are descendants of <div> elements, to "red".
<style>
{
color: red;
}
</style>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
Submit Answer »
Start the Exercise
All CSS Combinator Selectors
Selector
Example
Example description
element element
div p
Selects all <p> elements inside <div> elements
element>element
div > p
Selects all <p> elements where the parent is a <div> element
element+element
div + p
Selects the first <p> element that are placed immediately after <div> elements
element1~element2
p ~ ul
Selects every <ul> element that are preceded by a <p> element
★
+1
Reference: https://www.w3schools.com/css/css_combinators.asp