meyerweb.com

Week 1 Exam

Due Tuesday, 13 August 2002

  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. body div.aside ul li
      List elements that are descendant of an unordered list element that is a descendant of a div element with a space separated attribute value of aside that is a descendant of the body element.
    2. div + table
      A table element that is immediately preceded by a div element.
    3. div > table
      A table element that is a child of a div element.
    4. h1 + *
      Any element that is immediately preceded by a heading 1 element.
    5. div * + p + p
      A paragraph element that is immediately preceded by a paragraph element that is immediately preceded by any element that is a descendant of a div element.
    6. h1 + p#intro + ul > li.move
      A list element with a space separated attribute value of move, which is a child of an unordered list element that is immediately preceded by a paragraph element with the ID of intro, which is immediately preceded by a heading 1 element.
    7. ul > li ol > li * > a
      An anchor element which is a child of any element which is a descendant of a list element which is a child of an ordered list element that is preceded by a list element that is a child of an unordered list element.
    8. body > h1 + p + div > * + p + *
      Any element that is immediately preceded by a paragraph element that is immediately preceded by any element that is a child of a div element which is immediately preceded by a paragraph element that is immediately preceded by a heading 1 element that is a child of a body element.
    9. body * > * + h3 + * + table td > div ul > li *
      Any element that is a descendant of a list element that is a child of an unordered list element that is a descendant of a div element that is a child element of a table data element that is a descendant of a table element that is immediately preceded by any element that is immediately preceded by a heading 3 element that is immediately preceded by any element that is a child of any element that is a descendant of a body element.
    10. * + * > * * > * + * *
      Any element that is a descendant of any element that is immediately preceded by any element that is a child of any element that is a descendant of any element that is a child of any element that is immediately preceded by any element.


  2. Briefly explain the difference between div * and div*.
    Div * is any element that is a descendant of a div element, where as, div* is not CSS because there is no spaces separating the div and the star.

  3. Briefly explain the difference between td > ul and td>ul.
    td > ul is an unordered list element that is a child of a table data element and so is td>ul because whitespace around the child selector symbol is optional.

  4. Assume the following markup, which cannot be changed in any way:

    Go to this page for the answers to this question.

    <body>
<h1>Hel<strong>lo</strong> there!</h1>
<p>Welcome to my Web site.  I'm <strong>so</strong> glad 
you're here!  On this site you can find:
</p>
<ul>
<li><a href="mepics.html">Pictures of me</a>...
<ul>
<li>...with <a href="friendpics.html">friends</a></li>
<li>...with <a href="fampics.html">family</a></li>
<li>...with <a href="beerpics.html">beer</a></li>
</ul>
</li>
<li><a href="fluffpics.html">Pictures of my cat Fluffy</a></li>
<li><a href="poetry.html">My poetry</a>...
<ul>
<li>...written to <a href="seriouspoetry.html">be serious</a></li>
<li>...written to <a href="funnypoetry.html">be funny</a></li>
</ul>
</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:
</p>
<ul>
<li>lame</li>
<li>stupid</li>
<li>narcissistic</li>
<li><em>really</em> lame</li>
</ul>
<p>
I <strong>hate</strong> that!  Why do people do things like that?  
After all, if you don't like the Web site, don't come here.  I'm proud of 
<a href="fluffpics.html">my cat</a> and there's nothing wrong with
naming a mynx Fluffy anyway.
</p>
<p>
So <em>there</em>.
</p>
</div>
<p>
Sorry about that little bit of ranting.  I promise to be more cheerful in the 
future.  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>

    Write rules to accomplish the following tasks. Note that in some cases it may be possible to accomplish a task in multiple ways. Try to be as precise as possible with your selectors, and in no case should a selector be written so that the styles are applied to something beyond what's mentioned in each question.

    Go to this page for the answers to this question.

    1. Put a border around the "rant."
    2. Italicize all of the em elements found in the "rant."
    3. Make the word "really" in "really lame" red.
    4. Underline the word "there" in "So there."
    5. Boldface the mailto: link near the end of the page.
    6. Boldface the paragraph "Have a nice day!"
    7. Set a left margin of 1.5em for the sub-category lists for both pictures and poetry.
    8. Set a left margin of 2em for only the poetry sub-category list.
    9. Uppercase the word "beer."
    10. Set a square bullet for the last three category list items near the beginning of the page, without having that change carry into the sub-category lists.