CSS - Selector Basics - Child, Sibling, Descendant

by johnpapa

HTML

<script src="http://www.modernizr.com/downloads/modernizr-2.5.3.js"></script>
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <title>Baseball Today</title>
  </head>
<body>
<header>
    <h1>Baseball Today</h1>
    <nav>
        <ul>
            <li><a href="#/now">Now</a></li>
            <li><a href="#/scores">Scores</a></li>
            <li><a href="#/standings">Standings</a></li>
            <li><a href="#/statistics">Statistics</a></li>
        </ul>
    </nav>
</header>
<section>
    <article>
  <h1>Jeter Reaches 3000 hits!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at lorem ut tellus blandit accumsan. Quisque sit amet tortor mauris. Donec quis elit ante. Vestibulum gravida neque in justo consectetur ac consequat orci sodales. Proin non massa ut elit vulputate tristique sed at nunc. </p>

<p>In ultricies tincidunt sem, sollicitudin dignissim massa scelerisque a. Aenean ac massa nisl, sed bibendum urna. Proin dolor tortor, dapibus quis viverra at, luctus ut nulla. Donec nisl magna, dapibus aliquet blandit id, tempus elementum urna. In hac habitasse platea dictumst. Donec eget risus eget est sollicitudin gravida. In sit amet odio mi, id interdum ipsum. Sed molestie felis neque. Nunc cursus metus felis, id convallis ipsum. In quis ullamcorper ante. Pellentesque in quam vel risus lobortis sollicitudin. Proin vel dui diam, ut cursus nulla. Nam lacus dui, interdum rhoncus feugiat non, tristique sed nisl. </p>
    
<p>Donec in mi velit. Mauris vitae justo et purus condimentum volutpat. Donec nulla purus, sagittis et sollicitudin id, feugiat non metus. Duis auctor congue nisi, vel pretium sem tincidunt nec. In eget elit a lacus vulputate malesuada ut a augue. Nunc nibh dolor, mollis auctor tincidunt at, viverra sit amet mi. Etiam arcu orci,...

CSS

/* 1 RESET - http://meyerweb.com/eric/tools/css/reset
--------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    border: 0;
    font: inherit;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

/* 2.1 LAYOUT
--------------------------------------------------------- */
html {
    height: 100%;
    padding-left: 7%;
    padding-right: 7%;
}

body {
    background: #f5f5f5;
    font-size: 18px;
    margin: 7% auto;
}

body > header > h1 {
    font-family: 'Segoe UI';
    font-size: 200%;
    margin: 2%;
    padding: 1px;
    text-shadow: rgba(0,0,0,.4) 3px 3px 12px;
    text-transform: uppercase;
    text-align: center;
}

body > header > nav {
    border-top: solid 1px rgba(0, 0, 0, .2);
    border-bottom: solid 1px rgba(0, 0, 0, .2);
    font-family: 'Segoe UI';
    font-size: 150%;
    margin-bottom: 2%;
    padding: 2%;
    text-shadow: rgba(0,0,0,.4) 1px 1px 1px;
    text-transform: lowercase;
}

    body > header > nav > ul > li {
        display: inline;
        margin-right: 5%;
    }

    body > header > nav > ul > li:last-child {
        margin-right: 0; 
    }

        body > header > nav > ul > li > a {
            color: #ffa500;
            text-decoration: none;
        }

body > section > article > h1 {
    font-family: 'Segoe UI';
    font-size: 125%;
    margin-bottom: 1px;
    text-shadow: rgba(0,0,0,.4) 1px 1px 1px;
    text-transform: uppercase;
}

body > section > article > p {
    font-family: 'Segoe UI Light';
    font-size:...