H153 - Exam Week 3

  1. Calculate the specificity of each of the following selectors. Please format your answer in either hyphen- or comma-separated notation (e.g., 0-0-0-0 or 0,0,0,0). [3 points each]
    1. ul li em

      0, 0, 0, 3

    2. body#home *.example

      0, 1, 1, 1

    3. p.footer a:hover

      0, 0, 2, 2

    4. h1 + * p

      0, 0, 0, 2

    5. body > .aside > ul a:visited

      0, 0, 2, 3

    6. a:link:hover img[alt]

      0, 0, 3, 2

    7. div[title] + * #que > li

      0, 1, 1, 2

    8. p[class~="help"]:first-child:first-line

      0, 0, 2, 2

    9. * + * > * * > * + * *

      0, 0, 0, 0

    10. html:lang(en) body div.ii table tr td p:first-letter

      0, 0, 2, 8

  2. Explain why HTML-based presentational hints (e.g., font) are given a specificity of 0 (zero) in CSS2. [5 points]

    This allows users to give presentatonal markup that will allow the author some control over the look of the page when viewed with a user agent that does not support CSS while overriding those items with the stylesheet when viewed in a user agent that does support CSS.

  3. Given the following document markup, list the final set of declarations which apply to each of the three numbered elements below. Consider the specificity of selectors, possible inheritance, and the effects of inline styles. [25 points]
    Please note: In case of inherited properties, only list properties that are really inherited. To check which properties are inherited refer to the classbook Appendix A or the W3C CSS 2.1 specs.
    <html>
    <head>
    <title>a document</title>
    <style type="text/css">
    *[id~="pg-title"] {color: navy;}
    h1[id|="pg"] + * + div {font-weight: normal; color: #333;}
    div {font-weight: bold;}
    li:first-child {color: brown;}
    li {color: maroon;}
    div[id] p {font-weight: normal;}
    div#content {background: yellow; color: black; border: 1px solid brown;
    padding: 0.5em;}
    *#content p {font-style: normal;}
    </style>
    </head>
    <body>
    <h1 id="pg-title">Page Title</h1>
    <p>The lead paragraph.</p>
    <div id="content">
    <p>This is the content of the page.</p>
    <p style="font-weight: bold; font-style: italic;">[1]Allow me to
    make my main point here.</p>
    <p>Here's some supporting evidence:</p>
    <ol style="color: gray;">
    <li>point one</li>
    <li>[2]the second point</li>
    <li>point the third</li>
    </ol>
    <p>And some wrap-up.</p>
    </div>
    <div id="footer">[3]copyright somebody</div>
    </body>
    </html>

    [1] font-weight: bold; font-style: italic; background: yellow; color: black;

    [2] color: maroon; background: yellow; font-weight: normal;

    [3] font-weight: bold;

Jennifer Griner