CSS - Selector Basics - Child, Sibling, Descendant - VSMag

HTML

<script src="http://www.modernizr.com/downloads/modernizr-2.5.3.js"></script>
<body>
<header>
    <h1>Baseball Today</h1>
    <span id="tagline">Today's News</span>
    <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. <span class="callout">In hac habitasse platea dictumst.</span> 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. <span class="callout">Etiam arcu orci, lacinia quis malesuada quis, ultricies id ligula.</span> Praesent mauris quam, condimentum ut varius sit amet, iaculis vitae eros. Ut non mollis odio.</p>
</article>
</section>
</body>

CSS

html {
    height: 100%;
    padding-left: 7%;
    padding-right: 7%;
}

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

body h1 {
    font-family: 'Segoe UI';
    padding: 1px;
    text-transform: uppercase;
}

body > header > h1 {
    font-size: 200%;
    margin: 2%;
    text-shadow: rgba(0,0,0,.4) 3px 3px 12px;
    text-align: center;
}

#tagline {
    text-shadow: rgba(0,0,0,.4) 3px 3px 12px;
    text-align: center;
    margin-top: -2%;
    display: block;    
}

body > header > nav {
    border-bottom: solid 1px rgba(0, 0, 0, .2);
    margin-bottom: 2%;
    padding: 2%;
}

nav > ul > li {
        text-shadow: rgba(0,0,0,.4) 1px 1px 1px;
        text-transform: lowercase;
        font-size: 150%;
        display: inline;
        margin-right: 5%;
    }

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

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

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

body > section > article > p {
    font-family: 'Segoe UI Light';
    font-size: 100%;
    margin-top: 2%;
    margin-bottom: 2%;
    text-align:justify;
}

body > section > article > h1 + p {
    font-style: italic; 
    font-size: 110%;
}

.callout{
    font-weight: bold;
}


a {
    padding-bottom: 2px;
    text-decoration: none;
}

    a:hover {
        opacity: .8;
    }

    a:active, a:focus {
        position: relative;
        top: 1px;
    }

a[href=standings] {
    color: red;
}