H153 - Exam Week 1

  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 point each]:
    1. body div.aside ul li

      Any li element that is a descendant of a ul element that is a descentant of a div element with a class that includes aside which is a descendant of a body element.

    2. div + table

      Any table element that immediately follows a div element.

    3. div > table

      Any table element that is a child of a div element.

    4. h1 + *

      Any element that immediately follows a h1 element.

    5. div * + p + p

      Any p element that immediately follows a p element that immediately follows any element that is a descendant of a div element.

    6. h1 + p#intro + ul > li.move

      Any li element with a class that includes move that is a child of a ul lemeent that immediately follows a p element with an id of intro that immediately follows a h1 element.

    7. ul > li ol > li * > a

      Any a element that is a child of any element that is a descendant of a li element is a child of an ol element that is a descendant of a li element that is a child of a ul element.

    8. body > h1 + p + div > * + p + *

      Any element that immediately follows a p element that immediately follows any element that is a child of a div element that immediately follows a p element that immediately follows a h1 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 li element that is a child of a ul element that is a descendant of a div element that is a child of a td element that is a descendant of a table element that immediately follows any element that immediately follows a h3 element that immediately follows any element that is at least a grandchild of the body element.

    10. * + * > * * > * + * *

      Any element that is a descendant of any element that immediately follows any element that is at least a great-grandchild of any element that immediately follows any element.

  2. Briefly explain the difference between div * and div*. [5 points]

    div * selects any element that is a descendant of a div element. div* is actually invalid because there isn't any combinator to denote what the relationship between the two items are. If there were an element called div*, then that would actually apply to that element.

  3. Briefly explain the difference between td > ul and td>ul. [5 points]

    These two items are identical, because whitespace between an element and a combinator is optional.

  4. Briefly explain the difference between *#sidebar and #sidebar. [5 points]

    These two items are identical as both apply to any element with an id of sidebar.

  5. Assume the following markup, which cannot be changed in any way:
    <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. If you aren't sure how to specify a certain effect (e.g., uppercasing text) or don't understand exactly which elements are supposed to be selected, ask about it in the class forum. [4 points each]
    1. Put a border around the "rant."

      div.rant { border: thin solid #F00; }

    2. Strikethrough all of the em elements found in the "rant."

      div.rant em { text-decoration: line-through; }

    3. Make the word "really" in "really lame" red.

      div.rant li > em { color: #F00; background-color: inherit; }

    4. Underline the word "there" in "So there."

      div.rant > p > em { text-decoration: underline; }

    5. Boldface the mailto: link near the end of the page.

      div.footer > a { font-weight: bold; }

      body > p > a { font-weight: bold; }

    6. Boldface the paragraph "Have a nice day!"

      body > p + p { font-weight: bold; }

    7. Set a left margin of 1.5em for the sub-category lists for both pictures and poetry.

      li li { margin-left: 1.5em; }

    8. Set a left margin of 2em for only the poetry sub-category list.

      li + li li { margin-left: 2em; }

    9. Uppercase the word "beer."

      li li + li + li > a { text-transform: uppercase; }

    10. Set a border around the last three category list items near the beginning of the page, without having that change carry into the sub-category lists.

      h1 + p + ul > li + li { border: thin solid #000; }

Jennifer Griner