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 CSS3:

• descendant selector
• child selector
• adjacent sibling selector
• general sibling selector

---

Descendant Selector

The descendant selector matches all element 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 »

---

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 »