This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by leahael
about 9 years

ul li p VS div > p

I saw Erik had the same question but I don’t understand the answer (sorry!) I understand that to make the introduction and summary paragraphs bold that I have to write the CSS as body > p { font-weight: bold }

But what I don’t get is what happens with, for example, the bulleted list. If I want to make the list bold, why is the code ul li p { font-weight: bold; } Why does it not have the >. I feel like I’m missing something very obvious…Is it simply because there are three things rather than two?

Thank you! Leah

Answer 54c0d40fd3292f2d19001051

3 votes

Permalink

the exercise does contain a lot of text, so let’s break it down:

so, i made a simpler version of the exercise: http://jsbin.com/yovapuxape/1/edit

the > symbol will tell css to only style direct children of a certain element. so for example this:

body > p

will only style paragraphs directly in the body, so the introduction and summary paragraph. not the Synopsis paragraph. the Synopsis is nested inside the body, but not directly (it is wrapped in a div)

why should ul li p have a >? you could of course: ul > li > p still works (they are all direct children of one another. )

take a look here and study it for a second, to see what the direct (Immediate) childs are.

points
Submitted by stetim94
about 9 years

4 comments

leahael about 9 years

Oh my gosh it just clicked. Now I feel silly. Thank you so much for creating a separate link for me to refer to! Beyond nice!

stetim94 about 9 years

no problem

mockingjayinflight about 9 years

Thank you for explaining! The ‘children’ concept makes a lot more sense now. :)

stetim94 about 9 years

no problem, good it helped you