H153 - Practice Quiz Week 3

  1. Calculate the spcificity 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).
    1. body#home

      0,1,0,1

    2. div.example strong

      0,0,1,2

    3. html body div table tr td ul li ol li em

      0,0,0,11

    4. p.warning + p

      0,0,1,2

    5. *:first-child > a:hover

      0,0,2,1

    6. p#help:first-line

      0,1,0,2

    7. p[id="help"]:first-line

      0,0,1,2

    8. a:visited:focus *.link

      0,0,3,1

    9. div > * + ul > a

      0,0,0,3

    10. div[class~="urgent"][title~="notice"] p

      0,0,2,2

  2. Explain why hyperlinks don't inherit color from their ancestor elements.

    User agents have an explicit declaration for hyperlinks in their stylesheets which overrides any inherited styles.

  3. Consider this markup:
    <body>
    <h1 id="pg-title">Page Title</h1>
    <p>The lead paragraph<p> <p class="main-point">Allow me to make my main point here.</p> <div id="footer">copyright somebody</div>

    Given the following stylesheet, how will the "main-point" paragraph be styled? You need only describe the effects of the styles shown here; do not worry about taking browser defaults into account.
    body {color: black; font-weight: normal;}
    h1#title + p {font-style: italic; color: gray;}
    p.main-point {font-weight: bold; margin-left: 2em;}
    p + * {color: purple; margin-top: 0.25em;}
    p {color: black; font-style: normal;}

    color: black; font-weight: bold; font-style: normal; margin-top: 0.25em; margin-left: 2em;

    h1#title + p simply doesn't apply to that paragraph, because it doesn't select it.
    All items from p.main-point will apply because it's more specific.
    The color will be taken from p since body, p + *, and p all set the color and they all have the same specificity, so the last one in the stylesheet wins.
    All other items (except font-style) from p apply.

Jennifer Griner