8/23 CSS Selectors HELP


#1

Hi, I have an issue with the second question on this lesson. It tells me to make the intro and resume paragraphs into bold with font-weight. But everytime I click tu save and continue an error pops up saying that I have an error in this part.

My CSS code:

p {
font-family: Garamond;
}

body > p {
font-weight: bold;
}

ul p {
text-decoration: underline;
}

I dont know what's my error. Thanks for the help.


#2

If you are working with Tag selectors
you must be able to
read the index.html-document
following the guide-lines of the
DOM Document Object Model.

                   html
                     |
           + - - - - + - - - - +
           |                   |
          head                body
           |                   |
       + - - - +        +- - - +- - - +
       |       |        |      |      |
     link    title      p     div     p
                    (intro)    |  (summary)
                               |
                       + - - - + - - - - +
                       |                 |
                       p                 ul
                  (synopsis)             |
                                 + - - - + - - - - +
                                 |       |         |
                                 li      li        li
                                 |       |         |
                                 p       p         p
The p-Tags are located:
html > body > p  (2)
html > body > div > p (1)
html > body > div > ul > li > p (3)
p         as selector we have selected all 6 p-Tag's
body > p  as selector we selected 2 p-Tags ==> Intro & Summary
div > p   as selector we have selected 1 p-Tag  ==> Synopsis
div p as selector we have selected 4 p-Tag's
li > p    as selector we have selected 3 p-Tags under the ul-Tag

Some reference-material:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

As jQuery uses the same syntax for it's selector's
http://www.w3schools.com/jquery/jquery_ref_selectors.asp


#3

Maybe you read the Instruction:

  1. Make all < p> tags have a font-family of Garamond. (Do NOT use the universal selector for this! There's a better way; see the Hint for help.)
  2. Make the introduction paragraph and the summary paragraph have a font-weight of bold (this is a new property for you, but it works just like the others you've learned).
  3. Make the synopsis paragraph have the color #7AC5CD.
  4. Make the paragraphs in the unordered list have the color #000000 and text-decoration underline.

#4

Thanks leonhard, as you say I am using body > p as selector so only Intro & Summary are selected but still an error appears telling me this paragraphs need to be changed to bold.


#5

you can't go 'ul > p' because the 'li' are in the way, it needs to be directly 'li > p'


#6

but the used "ul p" is as valid as the 'li > p' selector...


#7

thats worked for me:

p {
font-family: Garamond;
}

body > p {
font-weight: bold;
}

div > p{color: #7AC5CD;}

ul p {
text-decoration: underline;
color #000000;

}