Can you swing it - isolating the paragraphs that are OUTSIDE of the div


#1


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


The exercise has us bold the introduction paragraph and the summary paragraph at the bottom bold. I noticed these paragraphs are located OUTSIDE of the div, so I tried to solve by using span. But I still got the oops message, asking if I made the intro and summary paragraphs bold. It seems like there is a way to isolate and modify the paragraphs/elements that are outside of the div but I don't know how :frowning: grrr. Any help appreciated


/*Add your CSS below!*/
p{  
    font-family: Garamond;
}
span{
    font-weight: bold;}
ul {
    color: #000000 text-decoration: underline
}


#2

Knowing different kinds of selectors can be useful.

What I did is use this > in the selector to target anything under a parent. For example, if I want to target paragraphs in a div, the div is the parent and p is the child. So I do:

div > p {
    /* CSS */
}

The introduction and summary are children under body and not under div so you can do

body > p {
    /* CSS */
}

This concept can also be applied to if you want to target the paragraphs inside the div.


#3

Thanks so much for the reply - but when I try body > p the text does not change. So confused.

p{
font-family: Garamond;
}

body > p {
font-weight: bold}


#4

You're missing a semicolon after bold.


#5

Amazing that did not do the trick either. Like I know its listening - it changes to bold if I just put "body" but when I add the > p (or even < p I tried both ways) it all goes back to regular text.

I am stubborn enough to keep trying but wondering if I should just move on...

body > p {
font-weight: bold;
}


#6

Odd....Perhaps refreshing/changing browsers may work? It works fine on Chrome (which I am using).
Assuming you didn't touch the HTML at all (removing the <span> tags you said you added because then body > p may not work) the working CSS I have looks like this:

p {
    font-family: Garamond;
}

body > p {
    font-weight: bold;
}

div > p {
    /* colour CSS from instructions */
}
 
li p { 
    /* colour and text-decoration CSS from instructions */
}

Result should look something like:


#7

I have exactly this code but the li p is not doing anything


#8

Can I see your code?


#9

Coffee_Machine here : thanks for hanging in with me datfat - I finally got it to work!


#10

Hooray! Good for you :slight_smile:


#11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.