CSS Specificity & Inheritance Activity

index.html

<h1>This is a CSS Specificity Exercise</h1>
<header class="header-home">
  <div id="navbar">
    <ul class="navbar-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</header>

style.css

h1 { 
  font-family: sans-serif;
}

header a {
  color: black;
  font: 1.4em sans-serif;
  text-decoration: none;
}

/* Calculate the Specificity of the CSS Selectors Below */

div#navbar ul.navbar-nav > li > a:hover {
  color: green;
}

header.header-home .navbar-nav > li > a:hover {
  color: red;
}

zGGrqa.markdown

CSS Specificity & Inheritance.

Calculate the specificity of the CSS Selectors. Which style wins?

A Pen by Rochelle Lewis on CodePen.

License.