In: Computer Science
1. What is the difference between a child selector and a descendant selector? In your answer, you must (1) explain what they are for, (2) provide an example child selector, and (3) provide an example descendant selector.
Child Selector is used to match all components of a given component that are child. It provides two elements the relationship. The selector TAG1 > TAG2 chooses the components that are particular parent's kids. The operand on the left of > is the mother and the operand on the right is the component of the kids.
Descendant selector is used to pick all components of the item that are baby (not a particular element). It selects the components within the components i.e. it mixes two selectors so that if they have an ancestor component matching the first selector, elements matched by the second selector are chosen.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Child and Descendant Selector
</title>
<style>
#firstDiv>h2 {
font-size:20px;
color:green;
}
#secondDiv h2 {
font-size:20px;
color:blue;
}
</style>
</head>
<body style = "text-align:center;">
<div id="firstDiv">
<h2>
Direct H2:This one with child selector
</h2>
<div>
<h2>Indirect H2:This one with child selector</h2>
</div>
</div>
<div id="secondDiv">
<h2>
Direct H2:This one with descendant selector
</h2>
<div>
<h2>Indirect H2:This one with descendant selector </h2>
</div>
</div>
</body>
</html>
Output: