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 »

 

All css and css3 for css tools and css3 tools with css code generator and css3 code generator. All css generator and css3 generator for css button gerator and css3 button generator, css gradient generator and css3 gradient generator, css menu maker and css menu maker, css button maker and css3 button maker other help css editor and css3 editor.