What Is the Combinator in CSS: Combinator in CSS

What Is the Combinator in CSS: Combinator in CSS is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

 div p { 
 background-color: yellow; 
 } 

Paragraph 4 is not in the div.

Paragraph 5 is not in the div.

Child combinator

Child combinator (>) allows combining "direct" sub-elements of another element (as explained above).

 div > p { 
  background-color: yellow; 
 } 

Here, the child element is p tag , the first element is div. The p tag in the div tag will have a background-color: yellow, and the other tags in p will not.

As an example,:

Example Descendant combinator

Paragraph 1 is in the div.

Paragraph 2 is in the div.

Paragraph 3 is in the div.

Paragraph 4 is not in the div.

Paragraph 5 is not in the div.

Adjacent sibling combinator

Adjacent sibling combinator (+) allows to select elements that are adjacent and on par with the specified element (adjacent "brother" elements).

 div + p { 
  background-color: yellow; 
 } 

Here, the element p is adjacent to and equal to the div, there will be background-color: yellow , and the other p tags in the div or p- cards are equal but not adjacent to the div .

As an example,:

Example Adjacent sibling combinator

Paragraph 1 is in the div.

Paragraph 2 is in the div.

Paragraph 3 is in the div.

Paragraph 4 is not in the div.

Paragraph 5 is not in the div.

General sibling combinator

General sibling combinator (~) allows to select elements that are equal to the specified element ("brother" elements).

 div ~ p { 
  background-color: yellow; 
 } 

Here, the element p is on the same level as the div will have background-color: yellow , and the other p tags in the div will not.

As an example,:

Example General sibling combinator

Paragraph 1 is in the div.

Paragraph 2 is in the div.

Paragraph 3 is in the div.

Paragraph 4 is not in the div.

Paragraph 5 is not in the div.

Previous post: Alignment - Align in CSS

Next lesson: Pseudo-class in CSS