Week 2 Practice Quiz

  1. Selectors can be described in a fairly straightforrward 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
      Selects any p element with a class attribute that contains the word urgent and a class attribute that contains the word warning.
    2. h1:first-child
      Selects any h1 element that is a first child.
    3. p:first-line
      Selects the first displayed line in a p element.
    4. p:first-child + * > table
      Selects any table element that is a child of any element that immediately follows a p element that is a first child.
    5. body:lang(en)
      Selects any body element which is in a language or locale whose identifier equals en or begins with en-.
    6. input[type="text"]
      Selects any input element with a type attribute that equals text.
    7. p[class]
      Selects any p element with a class attribute.
    8. p[class="aside"]
      Selects any p element with a class attribute that equals aside.
    9. p[class~="aside"]
      Selects any p element with a class attribute that contains the word aside.
    10. p[class|="aside"]
      Selects any p element with a class attribute that equals aside or begins with aside-.
    11. a[href] *
      Selects any element that is a descendant of an a element with a href attribute.
    12. a[href="http://www.w3.org/"][title="W3C-external"]
      Selects any a element with 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.
    1. div :first-child is equivalent to div *:first-child-- it selects any element which is the first child of another element and is also a descendant of a div element. By contrast, div:first-child selects any div element that's the first child of another element.
  3. Construct a single stylesheet that will have the following results for a document, without using attribute selectors:

    Here are my rules:

    1. a:link {color: blue;}
    2. a:visited {color: gray;}
    3. a:focus {background: #FF9;}
    4. a:hover {color: red; text-decoration: underline;}
    5. a:active {color: white; background: navy; font-weight: bold;}

  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;}?
    1. "so", "favorite", and "there". But not "not".

    1. Put a border around the strong element in the rant (try to use a different selector than in last week's quiz).
      div.rant strong:first-child {border: 1px solid black;}
    2. Boldface the word "me" in the footer, and use an attribute selector to do it.
      div.footer a[href] {font-weight: bold;}
    3. Make the e-mail hyperlink purple when it is "unvisited."
      a[href="mailto:me@my.web.site"]:link {color: purple;}
    4. Make the hyperlinks in the long list of links turn red when the mouse pointer is moved over them.
      ul > li a:hover {color: red;} 
    <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>