H153 - Practice Quiz Week 2

  1. Selectors can be described in a fairly straightforward way,as long as you work backwards. For example, the selector body div > * can be described as "any element that is a child of a 'div' that is a descendant of the 'body' element." Describe the following selectors:
    1. p.urgent.warning

      Any p element with a class attribute that contains the words "urgent" and "warning".

    2. h1:first-child

      Any h1 element that is the first-child of its parent element.

    3. p:first-line

      Selects the first displayed line of a p element.

    4. p:first-child + * > table

      Any table element that is a child of any element that immediately follows a p element that is the first-child of its parent element.

    5. body:lang(en)

      Any body element that has a language or locale that equals "en" or starts with "en-".

    6. input[type="text"]

      Any input element that has a type attribute that equals "text".

    7. p[class]

      Any p element that has a class attribute.

    8. p[class="aside"]

      Any p element that has a class attribute that equals "aside".

    9. p[class~="aside"]

      Any p element that has a class attribute that contains the word "aside".

    10. p[class|="aside"]

      Any p element that has a class attribute that equals "aside" or starts with the word "aside-".

    11. a[href] *

      Any element that is a descendant of a a element that has a href attribute.

    12. a[href="http://www.w3.org/"][title="W3C-external"]

      Any a element that has a href attribute that equals "http://www.w3.org/" and a title attribute that equals "W3C-external".

  2. Explain the difference between div :first-child and div:first-child.

    The first selects any element that is the first child of a div element (same as div *:first-child), but the second selects any div element that is a first-child of its parent.

  3. Construct a single stylesheet that will have the following results for a document, without using attribute selectors:
    • Unvisited hyperlinks are colored blue
    • Visited hyperlinks are colored gray
    • Hyperlinks with focus have a light yellow background
    • Hovered hyperlinks are underlined and colored red
    • Active hyperinks are boldfaced white text on a navy-blue background

    <style type="text/css">
    <!--
    a:link {color: #00f; background-color: inherit;}
    a:visited {color: #aaa; background-color: inherit;}
    a:focus {color: inherit; background-color: #fffacd;}
    a:hover {color: #f00; background-color: inherit; text-decoration: underline;}
    a:active {color: #fff; background-color: navy; font-weight: bold;}
    -->
    </style>

  4. Write a single rule to accomplish each of the following tasks with the markup that follows (that is, one rule per question). Note that in some cases it may be possible to accomplish a task in multiple ways. In addition, answer the following question: which em elements will be boldfaced by the rule em:first-child {font-weight: bold;}?

    so, favorite, there

    <body>
    <h1>Hel<strong>lo</strong> there!</h1>
    <p>Welcome to my Web site. I'm <em>so</em> glad you're here!
    On this site you can find:
    </p>
    <ul>
    <li><a href="mepics.html">Pictures of me</a></li>
    <li><a href="fluffpics.html">Pictures of my cat Fluffy</a></li>
    <li><a href="poetry.html">My poetry</a></li>
    <li><a href="favlinks.html">My <em>favorite</em> Web sites</a></li>
    </ul>
    <div class="rant">
    <p>
    The other day someone wrote telling my site was lame.
    I <strong>hate</strong> that!
    After all, if you don't like the Web site, don't come here.
    I'm proud of my cat and there's nothing wrong with naming a
    mynx Fluffy anyway.
    </p>
    <p>
    So <em>there</em>.
    </p>
    </div>
    <p>
    If you want, e-mail me at
    <a href="mailto:me@my.web.site">me@my.web.site</a>, but
    <em>not</em> if you're going to complain.
    </p>
    <p>Have a nice day!</p>
    <div class="footer">
    All content copyright <a href="mepics.html">me</a>,
    on the date I wrote it.
    </div>
    </body>

    1. Put a border around the strong element in the rant (try to use a different selector than in last week's quiz).

      p strong:first-child {border: thin solid red;}

    2. Boldface the word "me" in the footer, and use an attribute selector to do it.

      a[href="mepics.html"] {font-weight: bold;}

    3. Make the e-mail hyperlink purple when it is "unvisited."

      a[href="mailto:me@my.web.site"] {color: #f0f; background-color: inherit;}

    4. Make the hyperlinks in the long list of links turn red when the mouse pointer is moved over them.

      li a:hover {color: #f00; background-color: inherit;}

Jennifer Griner