H153 - Practice Quiz 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. h1 em

      Any em element that is a descendant of a h1 element.

    2. html body p

      Any p element that is a descenant of a body element that is a descendant of a html element.

    3. div *

      Any element that is a descendant of a div element.

    4. h1 > *

      Any element that is a child of a h1 element.

    5. div + ul

      Any ul element that immediately follows a div element.

    6. body > h1 + p

      Any p element that immediately follows a h1 element that is a child of a body element.

    7. body > div > * h3 + *

      Any element that immediately follows an h3 element that is a descendant of any element that is a child of div that is a child of a body element.

  2. 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></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>.
    </div>
    </body>

    Write rules to accomplish each of the following tasks, one rule per answer. 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.
    1. Make all strong elements boldfaced.

      strong { font-weight: bold; }

    2. Only boldface the strong element in the rant.

      div.rant strong { font-weight: bold; }

    3. Make the rant red (your choice of which red).

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

    4. Boldface the word "me" in the footer.

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

    5. Put a border around only those elements that are children of the body element.

      body > * { border: thin solid #000; }

    6. Set to zero the top margin of only the paragraph which starts "Welcome to my Web site."

      h1 + p { margin-top: 0; }

    7. Put a border around only those paragraphs that are grandchildren of the body element.

      body > * > p { border: thin solid #000; }

    8. Put a border only those elements that are at least grandchildren of the body element, but none of its children. (Hint: contemplate the space between the stars to find an answer.)

      body * * { border: thin solid #000; }

    9. Boldface only the paragraph which says "So there." (Hint: use of a particular selector would be a plus in this situation.)

      div.rant > p + p { font-weight: bold; }

Jennifer Griner