Calculate the specificity of the CSS Selectors. Which style wins?
A Pen by Rochelle Lewis on CodePen.
<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> |
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; | |
} |
Calculate the specificity of the CSS Selectors. Which style wins?
A Pen by Rochelle Lewis on CodePen.