When elements are nested inside one another, how to style the individual element using CSS which is nested in between(for example the 2nd or 3rd elements alone in a nested code)?


#1



https://www.codecademy.com/en/courses/web-beginner-en-WF0CF/0/2?curriculum_id=50579fb998b470000202dc8b


This is the coding from the topic "2. Multiple Selectors" of the Unit CSS Selectors.
Now below three "h3" elements are nested inside three "div" elements.
The instruction is to make the color of the h3 header nested inside the three "div"s(that's the last h3).
My doubt is how to apply this CSS property to "1st h3 alone (Me, too!)"
or
for "2nd h3 alone" (Me three!)?

Thank you,


<div>
            <h3>Me, too!</h3>
            <div>
                <h3>Me three!</h3>
                <div>
                    <h3>Forget you guys. I'm about to be red!</h3>
                </div>
            </div>
        </div>


#2

you don't have to select the first or second h3? You only need the third one. Which means you just put 3 div css selectors in chain selector.

If you want to grab the first or second h3, you either need a class or >. the > will only affect direct children, so:

body > div > h3

for the first h3, or for the second:

body > div > div > h3

> will be explained later