Intermediate CSS Workshop

Week Two Quiz

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
    2. div[class] + div * * > [href]
    3. * * > * + * + * p * > * *
    4. div > p:first-child a
    5. p#green > span + code[id] em


  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. [Link to first answer.]

    1. * > * + * * * * * > * a
    2. body h1 + div div p:first-child + div p span em a
    3. h1#first + h2#second + div#main
    4. div:first-child > * > li:first-child
    5. body > h1.opener


  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:")
    2. Portion 2 (List item - "Don't worry, be happy!")


  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 absolute hyperlink in the document.
    2. Draw a blue border around the list item "Never let 'em see you sweat."
    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.


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