Intermediate CSS Workshop
Week 2 Review Questions

Here's a chance for you to practice some of the concepts covered in week one.

• 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."

  1. body * p li em a 
  2. div[class] + div * * > [href] 
  3. * * > * + * + * p * > * * 
  4. div > p:first-child a 
  5. p#green > span + code[id] em 
  

  
  
• 1. body * p li em a selects a hyperlink contained within an emphasis tag contained within a list item contained within a paragraph contained within anything contained in the page's body.
     
     (This selector seems odd to me since I usually write in Visual Studio which objects when a list is placed within a paragraph.)
  2. div[class] + div * * > [href] selects any object with an href attribute that is at least two levels down from a div which is adjacent to a div with its class property set to any value.
  3. * * > * + * + * p * > * * selects something which is at least three levels down from a paragraph which itself is contained in at least the third sibling and that sibling is at least two levels down from the body.
  4. div > p:first-child a selects a hyperlink contained in a paragraph where the paragraph is the first child of a div.
  5. p#green > span + code[id] em selects something in an emphasis tag that is within a code tag that has its id set to any value (but has is set); the code element is adjacent to a span which is the child of a paragraph with its id attribute set to "green".
  
  
  
• 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.

  1. * > * + * * * * * > * a 
  2. body h1 + div div p:first-child + div p span em a 
  3. h1#first + h2#second + div#main 
  4. div:first-child > * > li:first-child 
  5. body > h1.opener
  

  
  
• 1. 0-0-0-1
  2. 0-0-0-11
  3. 0-3-0-3
  4. 0-0-0-4
  5. 0-0-1-2
  
  
  
• 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.

  Portion 1 (Paragraph - "Three important things to remember:") 
  Portion 2 (List item - "Don't worry, be happy!") 
  

  
  
• Portion 1
  • color: red (from div#main > p rendered incorrectly in IE 7, but OK in Firefox)
  • background: yellow (from p)
  • font-weight: bold (from p)
  • font-family: arial (from div#main)
  • line-height: 16px (from body)
  • font-size: 12px (from body)
  • font-variant: small-caps (from body)
  • font-style: normal (from body)
  Portion 2
  1. color: green (from ol li)
  2. background: orange (from ol li)
  3. font-style: italic (from ol li)
  4. font-family: arial (from div#main)
  5. font-weight: normal (from div#main)
  6. line-height: 16px (from body)
  7. font-size: 12px (from body)
  8. font-variant: small-caps (from body)
  
  
  
• Write a single selector to accomplish each of the instructions stated below. The instructions apply to the document pointed to in this link.

  1. Boldface the "normal.html" link and the only absolute hyperlink in the document. 
  2. Draw a blue border around the list item "Never let 'em see you sweat." 
  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. 
  
  

  
  
• 1. a:first-child{font-weight: bold;}
  2. li:first-child{border-style: solid; border-color: blue;} (worked in Firefox, not in IE7)
  3. p.footer a:first-child:visited{ color: green;}
  
  
  
• Draw a document tree for the document presented in question #4.
  
• The document tree is: