CSS — Part-4

CSS Combinators

• A combinator is something that explains the relationship between the selectors.
• Between the simple selectors, we can include a combinator.

There are 4 types of combinators :-

• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)

#Descendant Selector

• typically represented by a single space (“ “)
• combines two selectors
• it works such that elements matched by the second selector are selected if they have an ancestor (parent, parent’s parent, parent’s parent’s parent, etc) element matching the first selector.

<div class="box"><p>Text in .box</p></div>
<p>Text not in .box</p>
//css
.box p {
    color: red;
}

#Child Selector (>)

• It matches only those elements matched by the second selector that are the direct children of elements matched by the first.
• For example, to select only…