{"id":822,"date":"2014-03-01T13:35:37","date_gmt":"2014-03-01T13:35:37","guid":{"rendered":"http:\/\/local.sandjam.co.uk\/?p=822"},"modified":"2018-08-03T13:54:17","modified_gmt":"2018-08-03T12:54:17","slug":"css-specificity-and-point-scoring","status":"publish","type":"post","link":"https:\/\/sandjam.co.uk\/sandjam\/2014\/03\/css-specificity-and-point-scoring\/","title":{"rendered":"CSS specificity and point scoring"},"content":{"rendered":"<p>We all know about how CSS works right?<\/p>\n<p>Styles are inherited and cascade through the DOM to child elements.<\/p>\n<p>We know that CSS rules referring to element IDs have a greater weight than classes and inline styles trump them again.<\/p>\n<p>But how exactly does the browser work out which styles should win out when multiple CSS rules apply to an element?<\/p>\n<h2>That&#8217;s when CSS Specificity comes in<\/h2>\n<p>This is a bit complicated, but stick with it, it gets exciting!<\/p>\n<p>There are four elements to the scoring hierarchy:<\/p>\n<ul>\n<li>Inline styles e.g. <em>&lt;p style=&#8221;color:blue&#8221;&gt;<\/em><\/li>\n<li>ID selectors e.g. <em>#header{ color:blue; }<\/em><\/li>\n<li>Class selectors e.g. <em>.footer{ color:blue; }<\/em><\/li>\n<li>Elements and pseudo elements e.g. <em>p{ color:blue; } or p:after{ color:blue; }<\/em><\/li>\n<\/ul>\n<p>Each element in the document may have style attributes set by one or more of these methods. Each method of setting the style carries a different weight and the total weight of a particular style attribute determines whether it applies.<\/p>\n<h2>Weighty<\/h2>\n<p>The weights of each style application can be thought of as:<\/p>\n<ul>\n<li>Inline &#8211; 1000<\/li>\n<li>ID &#8211; 100<\/li>\n<li>Class &#8211; 10<\/li>\n<li>Element 1<\/li>\n<\/ul>\n<p>So for example, the following style declaration:<\/p>\n<pre class=\"qoate-code\">#header .logo a.main{ color:blue; }<\/pre>\n<p>Would get the following score:<\/p>\n<table style=\"border: 1px; padding: 5px;\">\n<tbody>\n<tr>\n<td>Inline &#8211;<\/td>\n<td>\u00a0ID &#8211;<\/td>\n<td>\u00a0Class &#8211;<\/td>\n<td>\u00a0Element<\/td>\n<\/tr>\n<tr>\n<td>0<\/td>\n<td>1<\/td>\n<td>2<\/td>\n<td>1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Whereas a similar declaration on the same element:<\/p>\n<pre class=\"qoate-code\">#content #header a{ color:red; }<\/pre>\n<p>would get a higher score<\/p>\n<table style=\"border: 1px; padding: 5px;\">\n<tbody>\n<tr>\n<td>Inline &#8211;<\/td>\n<td>\u00a0ID &#8211;<\/td>\n<td>\u00a0Class &#8211;<\/td>\n<td>\u00a0Element<\/td>\n<\/tr>\n<tr>\n<td>0<\/td>\n<td>2<\/td>\n<td>0<\/td>\n<td>1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>So this link would be red because 0201 is greater than 0121<\/p>\n<h2>Does that add up?<\/h2>\n<p>Sounds simple right? Well it&#8217;s not quite that straight forward.<\/p>\n<p>You might expect that if you had 10 classes on an element that would trump an ID, but it doesn&#8217;t.<\/p>\n<p>That&#8217;s because the weights aren&#8217;t added up numerically, they are concatenated in to a string which is used for comparison. So the scores above could be thought of as<\/p>\n<p>&#8220;0.1.2.1&#8221; and &#8220;0.2.0.1&#8221;<\/p>\n<p>and if you had a style declaration with 13 classes and one ID, that would be<\/p>\n<p>&#8220;0.1.13.0&#8221;<\/p>\n<p>This explains why <strong>an ID always trumps a class<\/strong>.<\/p>\n<h2>Win, lose or draw<\/h2>\n<p>What happens if two rules get the same score?<\/p>\n<p>The latest declared rule wins.<\/p>\n<h2>!Important notice<\/h2>\n<p>Any style which uses the !important tag behaves as the top trump and will beat any other weighted style declarations.<\/p>\n<p>It&#8217;s powerful, so be careful how you use it.<\/p>\n<h2>In practice<\/h2>\n<p>So what does this mean for us? Not a great deal, you&#8217;re never going to sit down and work out these scores but it should give you a better understanding of why your styles might be getting ignored.<\/p>\n<p>It also demonstrates why it&#8217;s a good idea to avoid inline styles, because it&#8217;s really difficult to override them in the stylesheet.<\/p>\n<p>Likewise, the !important tag is dangerous and should only be used when absolutely necessary to override inline styles.<\/p>\n<p>Generally, trying to understand how your styles are cascading and working within a structured styling pattern will lead to sensible CSS rule sets which play together nicely.<\/p>\n<h2>Read more<\/h2>\n<p><a href=\"http:\/\/coding.smashingmagazine.com\/2007\/07\/27\/css-specificity-things-you-should-know\/\">Smashing Magazine<\/a><\/p>\n<p><a href=\"http:\/\/www.stuffandnonsense.co.uk\/archives\/css_specificity_wars.html\">The Star Wars analogy<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We all know about how CSS works right? Styles are inherited and cascade through the DOM to child elements. We know that CSS rules referring to element IDs have a greater weight than classes and inline styles trump them again. But how exactly does the browser work out which styles should win out when multiple [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":823,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[35,36,37],"class_list":["post-822","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","tag-css","tag-tips","tag-tricks"],"acf":[],"_links":{"self":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/comments?post=822"}],"version-history":[{"count":8,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/822\/revisions"}],"predecessor-version":[{"id":988,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/822\/revisions\/988"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media\/823"}],"wp:attachment":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media?parent=822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/categories?post=822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/tags?post=822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}