H153 - Exam 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 point each]
    1. a.external:visited

      Any a element that has a class attribute that contains the word "external" and is in the "visited" state.

    2. a:link:hover

      Any a element that is in both the "unvisited" and "hover" states.

    3. [href]:focus strong

      Any strong element that follows any element with a href attribute that is in the "focused" state.

    4. td.navbar a:first-child:link

      Any a element that is a first-child of its parent and that is in the "unvisited" state that is a descendant of a td element that has a class attribute that contains the word "navbar".

    5. div h1:first-child + ul li:first-child

      Any li element that is the first-child of its parent that is a descendant of a ul element that immediately follows a h1 element that is the first-child of its parent that is a descendant of a div element.

    6. *:lang(fr):first-letter

      Selects the first displayed letter of any attribute with a language or locale that equals "fr" or starts with "fr-".

    7. h1 + div * > *:first-line

      Selects the first displayed line of any element that is the child of any element that is a descendant of a div element that immediately follows a h1 element.

    8. h2 + p + div *[src] + p

      Any p element that immediately follows any element with a src attribute that is a descendant of a div element that immediately follows a p element that immediately follows a h2 element.

    9. td[class="negative"] span > em[class]

      Any em element with a class attribute that is the child of a span element that is a descendant of a td element with a class attribute that equals "negative".

    10. table:first-child tr[class="odd subsummary"] td[class~="total"]

      Any td element with a class attribute that contains the word "total" that is a descendant of a tr element with a class element that equals "odd subsummary" that is a descendant of a table element that is the first-child of its parent.

  2. Explain the difference between a pseudo-class and a pseudo-element. List at least three of each type of selector. [5 points]

    A pseudo-element adds imaginary markup to your page. Examples: :first-letter, :first-line, :before, :after.
    A pseudo-class classifies an element based on something other than it's specific attributes (current state or inherited language). Examples: :first-child, :lang(x), :link, :visited, :hover, :active, :focus

  3. Explain what, if anything, is wrong with the following selectors being applied to an HTML document. Browser limitations should not figure into your answers. [4 points each]
    1. div + [class="aside"]:first-line em

      Pseudo-elements must be the last item in a selector, so if you cut off the em this would be fine.

    2. ul > * li * + > *[class] *

      There are two combinators, + >, right next to each other that aren't combining anything.

    3. table > td[bgcolor-="white"]

      -= is not a proper attribute selector. It needs to be =, |=, or ~=. Or there needs to be an attribute "bgcolor-" but there isn't.

    4. p[id] em.stronger a[href]

      I don't see anything wrong with this one.

    5. div#gallery > :hover img[alt|="fig"]

      I don't see anything wrong with this one.

  4. For each question, write a single rule (without using a grouped selector) to accomplish the given task with the markup that follows. Note that in some cases it may be possible to accomplish a task in multiple ways. Try to be as precise as possible.[5 points each]
    <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">
    Want to hear something annoying?
    <p>
    I mean, <strong>really</strong> annoying?
    </p>
    Well then, here goes.
    <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>
    1. Uppercase the word "so" in the first paragraph.

      body > p strong:first-child {text-transform: uppercase;}

    2. Color green the word "narcissistic."

      .rant li:first-child + li + li {color: green; background-color: inherit;}

    3. Make the link "my cat" purple when it's been visited, using a selector that begins with div and that contains a :first-child somewhere within it.

      div :first-child + :visited {color: #a0a; background-color: inherit;}

    4. Boldface the first letter of the paragraphs beginning with "Welcome to" and "The other day" using a single selector.

      :first-child + p:first-letter {font-weight: bold;}

    5. Uppercase the strong elements containing the text "lo" and "really" (but no others) using a single selector.

      :first-child strong:first-child {text-transform: uppercase;}

Jennifer Griner