Quiz

1. can you elaborate on the difference between descendant and child

   This is a surprisingly common question, so wrote about descendants. (I also linked this from the reading.)

2. What is the difference between a parent/child relationship and a ancestor/descendent relationship. based on this code:

   <ul>
      <li>harry</li>
      <li>ron</li>
      <li>hermione</li>
      <li>malfoy, who is a <em>pureblood</em></li>
   </ul>
   

   I'm not sure why <em> is not a child but a descendent."

   EM is a grandchild of UL, but not a child. So, EM is a descendant of UL, not a child.

3. I would like to talk more about descendants.

   descendant selectors can be useful when you want, say, to style all the hyperlinks in a NAV region, but not worry about whether they are direct children of NAV (they probably aren't).

   NAV A { text-decoration: none; color: black }

   Or you want to style all the P elements in particular SECTION:

   .pullout P { margin: 1em }

4. More about the difference between the selectors

   We learned four fancy compound selectors:

   • descendant selectors:

     A B

     Very common and useful.
   • child selectors:

     A > B

     Less common, but useful. Say you want to style top-level links differently from submenu links.
   • next sibling selectors:

     A + B

     This is often used in lists, where you want everything but the first element to have a style rule, like space between.
   • general sibling:

     A ~ B

     Relatively rare. Every later sibling after something.
5. Inheritance rules; more complex selectors

   Each property either is inherited or not. Usually pretty intuitive, but you can always look it up if you're unsure. If it's inherited, it can be overridden.

   Would you guess that, say, font-size is inherited? Let's see: font-size

6. Can you discuss more about the next sibling selector versus the sibling selector

   Sure. I like using next sibling when adding lines or space between elements, say in a list.

   I rarely use the general sibling rule.

7. pseudoclasses!

   These allow us to style things differently based on its state. Visited links versus unvisited links. Hover.

8. I don't have any questions for the reading, but can you explain question 2 on this quiz in detail?

   Sure. Here's the question and answers:

   To select every list item (LI) except the first (that is, every LI that is immediately preceded by another LI) you would use
       A. LI LI
       B. LI + LI
       C. LI - LI
       D. LI > LI            
       A and D are descendant relationships. C isn't an option. So, it's B.
   

9. how to choose which structural selectors to use?

   Great question. It's important to try to think structurally and systematically. So, don't decide how you want this element to look and then copy/paste that decision to the next element and the next and the next.

   Instead, step back and say: Ah, I want elements in this context to have a particular appearance. That context is often an ancestor (or you can create an ancestor to supply the context).

10. none at the moment! / None at the moment, the reading was clear.

    Glad to hear it!