8/23 selectors


#1

Hello i can't find how can i put the last p in bold, i'hve tried "div p ul li li li{}" but it didn't work haha


#2

Hi,

are you trying to make the introduction paragraph and the summary paragraph bold (part 2/4)? You would do this by selecting all p tags that are a direct child of the body tag. Like this -

body > p {
    font-weight: bold;
}

Thanks

Keith


#3

hey,
thank for u're answer, I managed the first step, but the issue is the summary, there is lot of "p" tags bettween summary and body and i don't know how select just this one.


#4

Hi,

no problem, I didnt do a very good job of explaining it, By using the > it is selecting all direct children of the parent element. So if you look at the example below

<body>

  <p>THIS WILL BE SELECTED</p>

  <div>
    <p>BUT THIS WONT</p>
  </div>

  <p>SO WILL THIS</p>

</body>

As both the p tag at the top and bottom are a direct child of the body element, those 2 will be selected, but the one inside the div wouldnt be, as its actually a great grandchild of the body element.

If you needed to select the last p (although I dont think that is what the exercise is asking for), you can use last-child or last-of-type

Thanks

Keith


#6

Thanks guys! it was rely helpfull :smile:


#7

+++ 8 / 23 HTML & CSS +++++++++++++++++
http://www.codecademy.com/forum_questions/545be0c080ff3379ea0008b9

OR as text

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


#8

Thanks a lot it's clear now :smile: