Latest web development tutorials

A combination of CSS selectors

A combination of CSS selectors

Note Combination selectors illustrate the direct relationship between the two selectors.

CSS selectors include a combination of various combinations of simple selectors.

In CSS3 it contains four combinations:

  • Descendant selector (separated by spaces)
  • Child element selector (greater than delimited)
  • Adjacent sibling selector (plus delimited)
  • Ordinary Brother selector (separated by a dash)

Offspring Picker

Descendant selector matches all elements worthy descendant elements.

The following example selects all <p> element into the <div> element:

Examples

div p
{
background-color:yellow;
}

try it"

Child selectors

Compared with descendant selectors, sub-selectors (Child selectors) can select an element as a child element of the element.

The following examples selected <div> element in all the direct child elements <p>:

Examples

div>p
{
background-color:yellow;
}

try it"

Adjacent Sibling Selector

Adjacent sibling selector (Adjacent sibling selector) choose another element immediately after the element, and both have the same parent element.

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

The following example selects all the first one in the <div> element after the <p> element:

Examples

div+p
{
background-color:yellow;
}

try it"

Ordinary adjacent sibling selectors

Common adjacent sibling selector to select all of the specified sibling elements.

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

Examples

div~p
{
background-color:yellow;
}

try it"