Optimize CSS w/ Selector Specificity Tutorial by Soh Tanaka

Selector Specificity

Best of

Comments

Twitter

HTML

<div id="featured">
	<h2 class="best">Best of</h2>
	<h2 class="fav">Popular Posts</h2>
	<h2 class="comments">Comments</h2>
	<h2 class="twitter">Twitter</h2>
</div>

CSS

h2 {
	font-size: 1.5em;
	padding: 10px 10px 10px 25px;
	margin: 10px 0;
	border: 1px solid #ddd;
	background: #f0f0f0 no-repeat 5px 10px;
}

h2.best {background-image: url(crown.gif);}
h2.fav {background-image: url(heart.gif);}
h2.comments {background-image: url(balloon.gif);}
h2.twitter {background-image: url(balloon_twitter.gif);}

#featured h2.twitter {
	background-color: #fffdd7;
	border: 1px solid #ddd991;
}