CSS Combination Selector

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)
  • Neighbor sibling selector ( separated by plus sign + )
  • Ordinary brother 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 ;
}

Child element selector

Compared with descendant selectors, child selectors can only select elements that are child elements of an element.

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

Example

div > p { 
	background-color: yellow ;
 }

Neighbor sibling selector

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

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