H152 - Review Questions Week 2

  1. Describe (in words) what the following selectors will match. For example, the selector div + p matches "Any p element that immediately follows a div element." [Link to first answer.]
    1. body * p li em a

      Any a element that is a descendant of an em element that is a descendant of a li element that is a descendant of a p element that is a descendant of any element which is a descendant of a body element.

    2. div[class] + div * * > [href]

      Any element with a href attribute that is the child of any element that is a descendant of any element that is a descendant of a div that immediately follows a div element with a class attribute.

    3. * * > * + * + * p * > * *

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

    4. div > p:first-child a

      Any a element that is a descendant of a p element that is a first-child of a div element.

    5. p#green > span + code[id] em

      Any em element that is the descendant of a code element with an id attribute that immediately follows a span element that is a child of a p element with an id of "green."

  2. Using the specificity notation from section 6.4.3 of the CSS2.1 specification (0,0,0,0 or 0-0-0-0) provide the specificity of the following selectors. [Link to first answer.]
    1. * > * + * * * * * > * a

      0, 0, 0, 1

    2. body h1 + div div p:first-child + div p span em a

      0, 0, 1, 10

    3. h1#first + h2#second + div#main

      0, 3, 0, 3

    4. div:first-child > * > li:first-child

      0, 0, 2, 2

    5. body > h1.opener

      0, 0, 1, 2

  3. Given the document pointed to in this link, state which style declarations (properties and values) will apply to the following portions of markup identified in the document. [Link to first answer.]
    1. Portion 1 (Paragraph - "Three important things to remember:")

      color: red;
      background: yellow;
      font-style: normal;
      font-variant: small-caps;
      font-size: 12px;
      line-height: 16px;
      font-family: arial, sans-serif;
      font-weight: bold;

    2. Portion 2 (List item - "Don't worry, be happy!")

      color: green;
      background: orange;
      font-weight: normal;
      font-style: italic;
      font-variant: small-caps;
      font-size: 12px;
      line-height: 16px;
      font-family: arial, sans-serif;

  4. Write a single selector to accomplish each of the instructions stated below. The instructions apply to the document pointed to in this link. [Link to first answer.]
    1. Boldface the "normal.html" link and the only absolute hyperlink in the document.

      a:first-child {font-weight: bold;}

    2. Draw a blue border around the list item "Never let 'em see you sweat."

      li:first-child + li {border: blue 1px solid;}

    3. Color the <a href="http://www.sdm.com"> link green when it has been visited. This style should not apply to any other links in the document.

      p.footer > a:first-child:visited {color: green; background-color: transparent;}

    Styled document

  5. Draw a document tree for the document presented in question #4.

    Document Map

Jennifer Griner