Week 3 Exam

Due Tuesday, 27 August 2002

  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 or 0,0,0).
    1. ul li em
      0,0,3
    2. body#home *.example
      1,1,1
    3. p.footer a:hover
      0,2,2
    4. h1 + * p
      0,0,2
    5. body > .aside > ul a:visited
      0,2,3
    6. a:link:hover img[alt]
      0,3,2
    7. div[title] + * #que > li
      1,1,2
    8. p[class~="help"]:first-child:first-line
      0,2,1
    9. * + * > * * > * + * *
      0,0,0
    10. html:lang(en) body div.ii table tr td p:first-letter
      0,2,7


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

    Per the W3C documentation, "In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets. The rules are assumed to be at the START of the author style sheet and may be overridden by subsequent style sheets."

    In CSS 1 the specificity was 1 but that was changed to 0 due to the introduction of the universal selector which has a specificity of 0 (we wouldn't want a presentational hint such as a font tag to override a style sheet's universal selector.)

  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.

    [1] is influenced by the cascading rule of inline style so the font-weight is bold and the font-style is italic. The text color (black) comes from the conforming user agent applying a default style sheet and this color is the expected presentation for a visual browser.
    The correct answer is:

    font-weight: bold;
font-style: italic;
color: black;
    The last value is inherited from 'div#content'.

    [2] is influenced by the declarations 5 where the list item gets a maroon color and 7 where the list elements have a default of transparent so the yellow background color of it's ancestor element div#content can show thru.
    The correct answer is:

    color: maroon;
font-weight: normal;
    I missed the second one, which is inherited from 'h1[id|="pg"] + * + div'.

    [3] is influenced by the declaration 3 where it gets a bold font-weight.

    <html>
<head>
 <title>a document</title>
 <style type="text/css">
  1 *[id~="pg-title"] {color: navy;}
  2 h1[id|="pg"] + * + div {font-weight: normal; color: #333;}
  3 div {font-weight: bold;}
  4 li:first-child {color: brown;}
  5 li {color: maroon;}
  6 div[id] p {font-weight: normal;}
  7 div#content {background: yellow; color: black; border: 1px solid brown;
     padding: 0.5em;}
  8 *#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>