A text teaches you to play with CSS combo selectors

Time:2021-10-24

CSS combination selectors include the combination of various simple selectors.

CSS3 contains four combinations:

  • Descendant selector (space delimited)
  • Child element selectors (separated by a greater than sign)
  • Adjacent sibling selectors (separated by a plus sign)
  • Normal sibling selectors (separated by dashes)

1. 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 the < div > element:


div p{
      background-color:yellow;
    }

2. Sub element selector

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

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


 div>p {
      background-color:yellow;
    }

3. Adjacent brother selector

The adjacent sibling selector can select the element immediately after another element, and they have the same parent element.

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

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


div+p{
      background-color:yellow;
    }

4. Follow up

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

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


div~p {
      background-color:yellow;
    }

That’s all for this article about how to play with CSS combo selectors. For more information about CSS combo selectors, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you can support developeppaer in the future!