background-color: yellow;
}
Here, descendants are p tags, the first element is div. The p tag in the div tag will have background-color: yellow.
For example:
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.
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.
For example:
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 (+) 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 .
For example:
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 (~) 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.
For example:
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