CSS Combinator

CSS Combinator

A combinator 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; }

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; }

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: </p>

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 >p< elements that are siblings of >div<elements: </p>

Example

div ~ p { background-color: yellow; }