CSS Selectors: Can you Swing It?


#1

Re the last part of my code for the li.

There's no change in the color or the text-decoration, Everything else worked fine.

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


#2

-1
You forgot one closing curly-bracket-}.

If you read the CSS-file
you have a =selector=
and an object enclosed in a pair of curly-brackets-{ }
the object has 1 or more properties

Each property consist of a
propertyKey, a colon-: as separator, and its associated Value, ended with a semi-colon-;
the semi-colon-; must be seen as a separator between 2 properties
thus the last property will NOT need a semi-colon-;**

p {
   aProperty;
   propertyKey: propertyValue;
   color: #000000  <==no semi-colon-; needed as no following property.
   }

===== intro to the 2nd problem ======

The index.html file is read by your Browser
and is loaded into =memory= following the rules of the
Document Object Model in short the DOM.
( Each =Browser-brand= has its own interpretation of the DOM !! )

The DOM representation of this HTML-document
as defined in the index.html file
looks like

                   html
                     |
           + - - - - + - - - - +
           |                   |
          head                body
           |                   |
       + - - - +        +- - - +- - - +
       |       |        |      |      |
     link    title      p     div     p
                    (intro)    |  (summary)
                               |
                       + - - - + - - - - +
                       |                 |
                       p                 ul
                  (synopsis)             |
                                         |
                                 + - - - + - - - - +
                                 |       |         |
                                 li      li        li
                                 |       |         |
                                 p       p         p

=
If you use a >-sign you are expressing that you only want direct-descendants aslo-called children
The p-Tags are located:
html > body > p (2) Intro & Summary
html > body > div > p (1) Synopsis
html > body > div > ul > li > p (3) the 3 p's as direct descendant of the li-Element
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 all p's which are its descendant synopsis & 3 li > p
li > p as selector we have selected 3 p-Tags under the ul-Tag
ul > p will be an EMPTY selection as there are no p's as direct-descendant
ul p will give 3 p's being the li > p

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

======= required change in CSS file =======

-2
You will have to change your
ul > p Selector either in ul p or in li > p or in li p


#3

Thank you for your help on this.