CSS Combination Selector

NoteThe CSS combination selector describes the relationship between the two selectors.

CSS combination selectors include various combinations of simple selectors.

Four combinations are included in CSS3:

  • Descendant selector (    separated by spaces   )

  • Child element selector ( separated by greater than > sign)

  • Adjacent sibling selector ( separated by plus sign + )

  • Subsequent sibling selector ( separated by tilde ~ )

Descendant Selector

The descendant selector is used to select the descendant elements of an element.

The following example selects all <p> elements and inserts them into <div> elements: 

Example

div p
{
    background-color:yellow;
}

 Try It! 

Child Element Selector

Compared with descendant selectors, child selectors can only select elements that are direct/first-level children of an element.

The following example selects all direct child elements <p> in the <div> element:

Example

div>p 
{ 
    background-color:yellow;
}

 Try It! 

Adjacent Sibling Selector

Adjacent sibling selector can select the element immediately after another element, and both have the same parent element.

If you need to select an element immediately after another element, and both have the same parent element, you can use the Adjacent sibling selector.

The following example selects all the first <p> elements located after the <div> element:

Example

div+p
{
    background-color:yellow;
}

 Try It! 

Subsequent Sibling Selector

The subsequent sibling selector selects all adjacent sibling elements after the specified element.

The following example selects all adjacent sibling elements <p> after all <div> elements: 

Example

div~p
{
    background-color:yellow;
}

 Try It!