Descendant Selector

➔ The descendant selector matches all elements that are descendants of a particular element.

➔ The following example selects all descendant <p> elements within the <div> element:

div p {
  background-color: yellow;
}

Click on the "Try it Now" button to see how it works.

Child Selector

➔ The child selector matches all elements that are the children of a particular element.

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

div > p {
  background-color: yellow;
}

Click on the "Try it Now" button to see how it works.

Adjacent sibling Selector

➔ The adjacent sibling selector matches all elements that are adjacent sibling of a particular element.

➔ The following example selects all adjacent sibling <p> elements within the <div> element:

div + p {
  background-color: yellow;
}

Click on the "Try it Now" button to see how it works.

General sibling Selector

➔ The general sibling selector matches all elements that are general sibling of a particular element.

➔ The following example selects all general sibling <p> elements within the <div> element:

div ~ p {
  background-color: yellow;
}

Click on the "Try it Now" button to see how it works.