Child selectors


Coders are incredibly lazy, so they'll often invent new ways of doing things that save just a little bit of time when there's already a perfectly good way of doing it. CSS selectors have a lot of these kinds of inventions.

Child selectors are a way to select an HTML element's children. It works like this:

<h1>Todo:</h1>
<ul>
  <li>Do laundry</li>
  <li>Walk dog</li>
  <li>Solve world peace</li>
</ul>

<h1>Sandwich recipe:</h1>
<ol>
  <li>Bread
  <li>Ingredients</li>
  <li>Close</li>
  <li>Cheese - sprinkle it on</li>
</ol>
ul li{
  color: white;
  border: 1px dotted yellow;
  margin-bottom: 10px;
  background-color: red;
}

ol li{
  color: white;
  border: 1px dotted yellow;
  margin-bottom: 10px;
  background-color: blue;
}

Todo:

  • Do laundry
  • Walk dog
  • Solve world peace

Sandwich recipe:

  1. Bread
  2. Ingredients
  3. Close
  4. Cheese - sprinkle it on

This makes the li children of ul red, and the li children of ol blue.


Cascading Style Sheets

Up until now we haven't talked about what CSS actually stands for, because it wouldn't make sense. Now it will.

CSS stands for Cascading Style Sheets. The "Style Sheets" part should already make sense: CSS is code that helps style your HTML documents.

Here's where the "Cascading" part comes in.

Notice how most of the CSS rules in the above lists are the same? The color, border, and margin-bottom values are all the same. It's only the background-color that changes. Knowing what you know about how lazy programmers are, I'll bet you're expecting a lazier way to write that code.

This CSS does the exact same thing as the CSS above, and it's easier to code:

li{
  color: white;
  border: 1px dotted yellow;
  margin-bottom: 10px;
}

ul li{
  background-color: red;
}

ol li{
  background-color: blue;
}

Challenge

In as few CSS rules as you can, make this HTML:

<h1>Jokes</h1>

<table>
  <thead>
    <tr>
      <th class="question">Question</th>
      <th class="answer">Answer</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td class="question">What's worse than finding a worm in your apple?</td>
      <td class="answer">Getting shot.</td>
    </tr>
    <tr class="even">
      <td class="question">What's green and has wheels?</td>
      <td class="answer">Grass. I lied about the wheels.</td>
    </tr>
    <tr class="odd">
      <td class="question">Why did the boy drop his ice cream?</td>
      <td class="answer">Because he was hit by a bus</td>
    </tr>
    <tr class="even">
      <td class="question">Why was six afraid of seven?</td>
      <td class="answer">It wasn't. Numbers are not sentient and thus incapable of feeling fear.</td>
    </tr>
  </tbody>
</table>

Look like this:

Screen Shot 2016-07-28 at 8.52.48 AM

Note: if you make the color the same as the background-color, then you can't see the text unless you highlight it.


Solutions

Try this challenge on your own first, then come back here to see other people's solutions.

Try this challenge on your own first, then come back here to see other people's solutions.