CSS Selectors | Sololearn: Learn to code for FREE!

+1

CSS Selectors

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?

6/30/2020 8:28:20 PM

coal

5 Answers

New Answer

+4

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!

+6

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

+3

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

+3

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

+1

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