This article teaches you how to play with CSS combination selectors

CSS combination selectors include various combinations of simple selectors.

There are four combinations in CSS3:

• Descendant selectors (space separated)
• Child element selector (separated by greater than sign)
• Adjacent sibling selectors (separated by plus signs)
• Normal sibling selectors (dash-separated)

1. Descendant Selector

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

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

div p{
      background-color:yellow;
    }

2. Child element selector

Compared to descendant selectors, child selectors can only select elements that are children of another element.

The following example selects all <p> elements that are direct children of a <div> element:

 div>p {
      background-color:yellow;
    }

3. Adjacent sibling selector

The adjacent sibling selector selects an element that is immediately after another element and has the same parent.

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

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

div+p{
      background-color:yellow;
    }

4. Subsequent sibling selector

The following sibling selector selects all the adjacent sibling elements following the specified element.

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

div~p {
      background-color:yellow;
    }

This is the end of this article about teaching you how to use CSS combination selectors. For more relevant CSS combination selector content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!