CSS Selectors

Question

Why should we select the parent element to style the child element?
look at this example below

This is the Html code:
<div id="intro">
<p class="first">This is a <em> paragraph.</em></p>
<p> This is the second paragraph. </p>
</div>
<p class="first"> This is not in the intro section.</p>
<p> The second paragraph is not in the intro section. </p>

and this is the CSS code:
#intro .first em {
color: pink;
background-color:gray;
}

we want to select and style whats in em tag and in here we have #intro selected
why?
we can just select the .first class and style our em tag
what's behind this?

Answer 1

Suppose your code is like

<div id="intro">
<p class="first">This is a <em> paragraph.</em></p>
<p> This is the second paragraph. </p>
</div>

<div>
<p class="first"> This is not in the<em> intro section.</em></p>
<p> The second paragraph is not in the intro section. </p>
</div>

and this is the CSS code:
.first em {
color: pink;
background-color:gray;
}

Then it''ll applied to second paragraph also.

Hope you get it.

Thanks!

Answer 2

If there are other classes in different div with same name "first",and you just want to style this specific one ,

Answer 3

Google search about "CSS specificity rules". You will get more info

Answer 4

https://code.sololearn.com/WP3MtSfNyxQ4/?ref=app
What about this Does it give you any idea?

Answer 5

If there are other classes in different div with same name "first",and you just want to style this specific one ,

Answer 6

Donation classification