<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Slash25 Code &#187; specificity</title>
	<atom:link href="http://slash25.com/tag/specificity/feed/" rel="self" type="application/rss+xml" />
	<link>http://slash25.com</link>
	<description>Code that works&#8230;, Beautifully.</description>
	<lastBuildDate>Fri, 02 Jul 2010 01:48:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>CSS Specificity &#8211; the basics</title>
		<link>http://slash25.com/2009/04/css-specificity-the-basics/</link>
		<comments>http://slash25.com/2009/04/css-specificity-the-basics/#comments</comments>
		<pubDate>Thu, 30 Apr 2009 06:01:18 +0000</pubDate>
		<dc:creator>patrick</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[specificity]]></category>

		<guid isPermaLink="false">http://slash25.com/?p=182</guid>
		<description><![CDATA[Specificity is one of the most difficult topics to grasp in CSS but it doesn&#8217;t have to be. It requires two things: Basic math. (How to add, really.) How to tell the difference between an HTML element (a tag), a class, an id, and a pseudo-element That&#8217;s it. Let&#8217;s look at an example: Say you&#8217;ve [...]]]></description>
			<content:encoded><![CDATA[<p>Specificity is one of the most difficult topics to grasp in CSS but it doesn&#8217;t have to be. It requires two things:</p>
<ol>
<li>Basic math. (How to add, really.)</li>
<li>How to tell the difference between an HTML element (a tag), a class, an id, and a pseudo-element</li>
</ol>
<p>That&#8217;s it. Let&#8217;s look at an example:</p>
<p>Say you&#8217;ve got this in your styles:</p>
<p><code>ul li { color: black; } </code><br />
<code>li { color: red; }</code></p>
<p>What will the color of list items (li) be? Is it red, because it comes last? Is it black because we&#8217;ve got two tags in the style? The correct answer is black, but not just because we have two tags in the style. It&#8217;s because that style declaration&#8217;s specificity is greater.</p>
<p><a href="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/">Here&#8217;s the specificity math</a>:<br />
<em>element selectors (HTML tags) = 1<br />
pseudo-element selectors = 1<br />
class selectors = 10 (also psuedo-classes and attributes)<br />
id selectors = 100<br />
inline style = 1000</em></p>
<p>Looking back at the list items, the style with both the ul tag and the li tag has a specifity value of 2 (1 + 1) while the li by itself has a value of 1.</p>
<p>Let&#8217;s look at some of the styles on slash25.com.</p>
<pre>p {
	line-height: 1.5em;
	margin-bottom: 1.5em;
	}</pre>
<p>Specificity = 1</p>
<pre>div.entry div p {
	font-family: "gill sans",helvetica, sans-serif;
	font-weight: 100;
	font-size: 90%;
	letter-spacing: 1px;
	}</pre>
<p>Specificity = 13<br />
10 for .entry, 1 for div, 1 for div, 1 for p</p>
<p>What about the link styles?</p>
<pre>a {
	color: #00a0ea;
	text-decoration: none;
	border-bottom: 1px dotted #00a0ea;
	}</pre>
<p>Specificity = 1</p>
<pre>a:hover, a:focus {
	color: #000;
	border-bottom: 1px solid #000;
	}</pre>
<p>Specificity = 11 (there are two styles, each with a specificity value of 11)<br />
10 for :hover (or :focus), 1 for a</p>
<pre>#subNav li li a:hover,#subNav li li a:focus {
	color: #000;
	border-bottom: none;
	}</pre>
<p>Specificity = 113 for each.<br />
100 for #subNav, 10 for :hover (or :focus), 1 for li, 1 for li, 1 for a</p>
<p>Remember these basics and you&#8217;ll be able to calculate specificity like a pro. Then, the order in which a style appears in the CSS won&#8217;t matter as much because you&#8217;ll be able to increase the specificity of a style and have your desired effect come to life.</p>
<p><em>Are there caveats? Like all things in life, yes. The linked URL in this goes to a wonderful Smashing Magazine article in which they go into great depth. I would recommend if you&#8217;re stuck and everything seems to not work, <a href="http://slash25.com/contact">drop us a comment</a> or visit that article and see if you can&#8217;t figure it out.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://slash25.com/2009/04/css-specificity-the-basics/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
