TimKeesling.com
CSS Week 2 Quiz

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."
   
   
   1. body * p li em a
      • ANSWER:
        Selects any a element that is a descendant of an em element that is a descendant of a li element that is a descendant of a p element that is a descendant of any element that is a descendant of a body element.
   2. div[class] + div * * > [href]
      • ANSWER:
        Selects any element with a href attribute that is a child of any element that is a descendant of any element that is a descendant of a div element that immediately follows a div element with a class attribute.
   3. * * > * + * + * p * > * *
      • ANSWER:
        Selects any element that is a descendant of any element that is a child of any element that is a descendant of a p element that is a descendant of any element that immediately follows any element that immediately follows any element that is a child of any element that is a descendant of any element.
   4. div > p:first-child a
      • ANSWER:
        Selects any a element that is a descendant of a p element that is a first child that is a child of a div element.
   5. p#green > span + code[id] em
      • ANSWER:
        Selects any em element that is a descendant of a code element with an id attribute that immediately follows a span element that is a child of a p element with an id attribute that equals green.
   
   
   
2. Using the specificity notation from section 6.4.3 of the CSS2.1 specification (0,0,0,0 or 0-0-0-0) provide the specificity of the following selectors.
   
   
   1. * > * + * * * * * > * a
      • ANSWER:
        0 - 0 - 0 - 1
   2. body h1 + div div p:first-child + div p span em a
      • ANSWER:
        0 - 0 - 1 - 9
   3. h1#first + h2#second + div#main
      • ANSWER:
        0 - 3 - 0 - 3
   4. div:first-child > * > li:first-child
      • ANSWER:
        0 - 0 - 2 - 0
   5. body > h1.opener
      • ANSWER:
        0 - 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.
   
   
   1. Portion 1 (Paragraph - "Three important things to remember:")
      • ANSWER:
        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!")
      • ANSWER:
        color: green; (ol li rule - direct match)
        font-style: italic; (ol li rule - direct match)
        font-size: 12px; (inherited from body rule)
        line-height: 16px; (inherited from body rule)
        font-weight: normal; (inherited from div#main rule)
        background: orange; (ol li rule - direct match)
        font-variant: small-caps; (inherited from body rule)
        font-family: arial, sans-serif; (inherited from div#main rule)
        
   
   
   
4. Write a single selector to accomplish each of the instructions stated below. The instructions apply to the document pointed to in this link.
   
   
   1. Boldface the "normal.html" link and the only absolute hyperlink in the document.
      • ANSWER:
        

        div#main > p.normal > a:first-child { 
          font-weight: bold; }
                      

      
      
      
   2. Draw a blue border around the list item "Never let 'em see you sweat."
      • ANSWER:
        

        div#main > :first-child + * + * li:first-child + * {
          border: .1em solid #0000FF; }
                      

      
      
      
   3. Color the <a href="http://www.sdm.com"> link green when it has been visited. This style should not apply to any other links in the document.
      • ANSWER:
        

        a:visited[href="http://www.sdm.com"] {
          color: #00CC00; }
                      

   
   
   
5. Draw a document tree for the document presented in question #4.
   
   
   • ANSWER: