Week Two Review - Elizabeth Hightower

Same deal this week.  Do the reading, work the quiz, and post what you feel like posting - questions about the quiz or your shot at quiz answers.  Discussion of these topics is encouraged.

1. Describe (in words) what the following selectors will match.  For example, the selector div + p matches "Any p element that immediately follows a div element." [Link to first answer.]
   
   
   1. body * p li em a
      
      Any a element that is a descendant of em, that is a descendant of li, that is a descendant of p that is any descendant of body.
      
      
   2. div[class] + div * * > [href]
      
      any href that is a child of any element that is a descendant of any element that is a descendant of div that is a sybling (immediately follows) a div with the class atribute.
      
      
   3. * * > * + * + * p * > * *
      
      any element that is a descendant of any element that is a child of any descendant of p that immediately follows an element that immediately follows any element that is a child of any descendant of any element.
      
      
   4. div > p:first-child a
      
      an a element that is a descendant of any p that is also the first-child of any div element
      
      
   5. p#green > span + code[id] em
      
      any em element that is a descendant of a code element with an id that immediately follows a span element that is a child of a p with an id attribute of green
      
      
   
   
   
2. Using the specificity notation from section 6.4.3 of the CSS2 specification (0,0,0) provide the specificity of the following selectors. [Link to first answer.]
   
   
   1. * > * + * * * * * > * a
      
      0 0 1
      
      
   2. body h1 + div div p:first-child + div p span em a
      
      0 1 11
      
      
   3. h1#first + h2#second + div#main
      
      3 0 3
      
      
   4. div:first-child > * > li:first-child
      
      0 2 2
      
      
   5. body > h1.opener
      
      0 1 2
      
      
   
   
   
3. Given the document pointed to in this link, state which style declarations (properties and values) will apply to the following portions of markup identified in the document. [Link to first answer.]
   
   
   1. Portion 1 (Paragraph - "Three important things to remember:")
      
      I didn't know these right off the bat, but I went over the quiz answers, and I think I get it
      font-style: normal; (inherited from body rule)
      font-variant: small-caps; (inherited from body rule)
      font-size: 12px; (inherited from body rule)
      line-height: 16px; (inherited from body rule)
      font-family: arial, sans-serif; (inherited from div#main rule)
      font-weight: bold; (from p rule - direct match)
      background: yellow; (from p rule - direct match)
      color: red; (from div#main > p rule - direct match)
      
      
   2. Portion 2 (List item - "Don't worry, be happy!")
      
      font-variant: small-caps; (from body)
      font-size: 12px; (from body)
      line-height: 16px; (from body)
      font-family: arial, sans-serif; (from div#main)
      font-weight: normal; (from div#main)
      color: green; (from ol li)
      background: orange; (from ol li)
      font-style: italic; (from ol li)
      
      
      
   
   
   
4. Write a single selector to accomplish each of the instructions stated below.  The instructions apply to the document pointed to in this link. [Link to first answer.]
   
   
   1. Boldface the "normal.html" link and the only e-mail link in the document.
      
      a:first-child { font-weight: bold; }
      
      
   2. Draw a blue border around the list item "Never let 'em see you sweat."
      
      li:first-child + li { border: 1px solid blue; }
      
      
   3. Color the <a href="mailto:scott@sdm.com"> link green when it has been visited.  This style should not apply to any other links in the document.
      
      p.footer > a:first-child:visited { color: green; background: transparent; }
      
      
   
   
   
5. Draw a document tree for the document presented in question #4.