Simple CSS: Specificity

with 1 Comment

Simple CSS: Specificity for Beginners: Billion System

While writing the post Forms for Websites ~ A Template for HTML5 or WordPress I had a problem with my CSS, a CSS Specificity problem!

I solved it with what I refer to as the “Billion System!” The Billion System is my simple system for resolving CSS Specificity problems quick and easily. The Billion System is so simple and easy to use, I thought I would share it with the rest of the world.  It is so easy to understand that even grade school kids can do it for you!  So relax and let the kids take over!

The Billion System

The Billion System has solved ALL my CSS Specificity problems. However, it may not fully work for that .01% as I was shooting for something very easy to use. So I will just say this should solve 99% (or more) even though it solves 100% of my CSS Specificity problems.

You can just use a calculator and add up the numbers. The final result will always be less than 2 billion. If your calculator you have has less than a 10 digit display you can still use this system by adding the two biggest numbers by hand! (that way you can use a common eight digit calculator or cell phone calculator).

Nutshell

In a nutshell, the Billion System CSS Specificity states:

Elements and Pseudo-elements earn one point each.

Classes, Pseudo-classes, and Attributes earn 1,000 (1 thousand) points each (except :not).

ID‘s earn 1,000,000 (1 million) points each.

Style Attributes in HTML earn 1,000,000,000 (1 billion) points!

!important earns a wopping 2,000,000,000 (2 billion) points!

* (anything), > (child), and + (sibling) earn nothing.

:not earns nothing (but the element inside of :not still earns!)

Add these together and the largest number wins!

STOP

You now know everything there is to know!  Follow the above simple rules and you will not make a CSS Specificity mistake!

But if you want to torture yourself by reading more, please continue!

Some examples:

      CSS             Old Method                      With leading zeros   Easy Human!
 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,000,000,000 or             0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,000,000,001 or             1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,000,000,002 or             2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,000,000,002 or             2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,000,000,003 or             3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,000,001,001 or         1,001 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,000,001,003 or         1,003 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,000,002,001 or         2,001 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,001,000,000 or     1,000,000 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,000,000,000 or 1,000,000,000 */
{    !important}   /* a=2 b=0 c=0 d=0 -> specificity = 2,000,000,000 or 2,000,000,000 */

More Examples:

Elements and Pseudo-elements earn one point each.

div p:first-line

This has two elements and one pseudo-element 2+1 is worth 3 points.

 

Classes (starting with a dot “.“), Pseudo-classes (starting with a colon “:“) and Attributes (in square brackets “[]“) earn 1,000 points each (except :not).

div p.class:first-line a:link {}

This has one class (.class) and one pseudo-classes (:link) each worth 1,000 points, and 3 elements = 2,003

 

h1[id=lan143] {}

This is counted as  one attribute ([id=lan143]) worth 1,000 points and 1 element also = 1,001

Notice that the <h1 id=”lan143″> here only earns 1,000 points as an attribute.  Now look at this…

 

h1#lan143 {}

This time the ID is counted as one id (#lan143) worth 1,000,000 points and 1 element now = 1,000,001

Notice that the <h1 id=”lan143″> now earns 1,000,000 points as an id.

I wish I could get a pay raise like that!

 CSS Specificity in Even More Detail

Phase One

First let’s get a ridiculous example so we can see how Phase One of the Billion System works:

html body div ul li ol#ol-outer li ul li.li-three ol>li ul li.li-five ol#ol-inner li a:link {color: blue;}

Note: Do NOT count anything twice!
(Cross it out as you count it!)

Count the Elements

The first step is to just count the elements and pseudo-elements!

Pseudo-elements are like:

  • :first-line
  • :first-letter

How many did you count in our example?

I counted sixteen (and no pseudo-elements), so let’s start our count with that!  Our First Number is:

16

Count the Dots and Colons

A dot looks like this “.”

A colon looks like this “:” (but not pseudo-elements you already counted!)

Count them!

I counted two dots and one colon.

2+1=3

Easy…

Now Dot and Colons are worth one thousand each so three times one thousand = three thousand! (3*1000=3000).  Therefore our second number is:

3,000

Total so far, 16 + 3,000 = 3,016

The Exception!  “Not for Not!”  Do not give any value to the pseudo-class not (but still count the element above!).

Count the Number Signs

A number sign looks like this “#” (some call it a pound sign or a tick-tack-toe board!)

How many did you find?  I found 2.  Since Number signs are worth a million each, our third number is:

2,000,000  (still pretty easy!)

Our count so far is: 16+3000+2,000,000 = 2,003,016

Adding It All Up

Most of the time you can just stop right here!  Add up and compare your numbers.  The larger number wins!

I told you this was easy!

Easy Conversion To Standard Notation

At this point you can turn you Simple CSS Billion System Number into the standard format notation…

Just drop the leading zeros!

0,002,003,016 Becomes

0,2,3,16  Or simply

2,3,16

 

STOP!

( You are learning too much! )

Phase Two

Most people do not need to go beyond Phase One.  However, there is VooDoo Magic, a common-sense Caveat, the Equalizer (what if two really are a equal?). Plus some educational information, fun, a little about delimiters and other resources to read!

Voo Doo Magic

Let’s deal with the  “voodoo magic number!”  Voodoo magic you really should avoid using.  This is !important (and also the style attribute).  The Billion System deals with these two in simple ways also.

Two-Billion !important

#content a { color: red !important; }

Honestly I have been writing computer code for more than four decades.  People ask me how to solve their CSS problems and truthfully I have, so far, not found a use for !important ~ other than for testing, or something temporary like that.

I recommend you avoid using it. But… in the Billion System, if you use !important, add Two-Billion!
Yes, you read this correctly. When you use !important add:

2,000,000,000

Here is something to think about, what if ALL your CSS had !important ?  Really, it would end up being the same as if NONE of your CSS had !important.  That may explain why I have not used it so far…  I really do not believe it is needed.  For me, this is just VooDoo Magic that I would rather avoid.  Then later I also avoid the problems!

One Billion Style

<p style="color: red;">Add A Billion For Style</p>

The style attribute in HTML is an easy one.  Just give it a plus One Billion and it wins!  (Except from voodoo above!)  All other CSS will never add up to a billion, so the style attribute found inside the element always wins!  ( Unless you foolishly practiced VooDoo with !important )

Add A Billion For Style

1,000,000,000

A Billion ALWAYS Wins!  (If you do not use !important voodoo!)  So there is no need to figure it out.  If you have CSS in your HTML style attribute, it will always be the top priority.  (Unless you sold your soul to !important VooDoo)

Caveat

( Common-sense is not so common anymore! )

“You can’t inherit until I am dead!”

I borrowed this example from CSS Specificity for Poker Players… take a look…

Take a look at these XHTML and CSS snippets.

What color will the main paragraph text be?

XHTML:

<body> 
  <div id="pagewrapper"> 
    <div class="content"> 
      <p>This is the main paragraph.</p>
    </div>
    <div class="secondary">
      <p>This is the secondary paragraph.</p>
    </div>
  </div>
</body>

CSS: 
p { color: red; }
body div { color: brown; }
div#pagewrapper { color: blue; }
#pagewrapper div.content { color: green; }

The answer might surprise you. It will be red!

Even though parent elements are specified to the gills and color is an inherited attribute, you must look for the element being styled first before taking into account any specificity conflicts.

In this case, all bets are off since the final three rules never targeted the paragraph element.

Common sense!  You can only redefine rules that are already defined!  Inherited rules are not the same!

The Equalizer

The Equalizer is simple, if all things are really equal, then the last stated rule wins!  I think this is the rule everyone starts with…  That is why so many people get confused with CSS Specificity.

Some Fun

If you really hate IE and Windows users, you could try something like this to frustrate them…

p {
	background: #ffffff; /*white page*/
	color: #000000 !iportant; /* good browsers * black letters/
	color: #f8f8f8; /* IE/Win * almost white shade of gray/
}

I have been told that IE/Win ignores this !important rule when the same property appears twice within one selector.  I have neither Windows nor IE to check this on, so your mileage may vary.

The Delimiters

The Billion System uses the comma delimiters to represent the same thing as in “human numbers!”

Taking an example from Eating Up Computer Numbering!

In the Philippines (and also the USA) the number:
one-billion-two-million-three-thousand-sixteen
is written as:
1,002,003,016

The Commas are the delimiters that mark or separate the four groups of numbers we call billions, millions, thousands and ones. If we removed the leading zeros, we could write it this way…
1,2,3,16

It looks strange but still, there it is…
1 billion, 2 million, 3 thousand, sixteen!

Important Notes

  • The universal selector (*) has no specificity value (0), neither does child (>) nor sibling (+)
  • Pseudo-elements (e.g. :first-line) get only 1, unlike their psuedo-class brethren which get 1,000
  • The pseudo-class :not() adds no specificity by itself, only what’s inside it’s parentheses.
  • The !important value appended a CSS property value is an automatic win. It overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later in the CSS (or in the style) and with equal or great specificity value otherwise.  You could think of it as adding 2,000,000,000 to the specificity value.
  • If you don’t use !important (and there are many reasons why you shouldn’t) then the style attribute automatically wins with 1,000,000,000 points in the Billion System for CSS Specificity!

More Torture

If you did not figure out how to figure out this in the first blue box above, you should take up sewing or basket weaving.  That is the simplest way of figuring CSS Specificity.  But if you want to torture yourself by reading more about this… here are some places you can stop and visit.  Don’t forget to tell them I sent you there…

CSS Specificity for Poker Players ~ I use a little from that page above.  I am not much for poker, but it is a good read and poker players may benefit!

Specificty for Star Wars Fans ~ Great if you know Klingon, or was that Star Trek? May the force be with you Luke!  I did see the Original when it was first released in theaters!  In fact I was already writing computer programs then, a Jedi Master for more than a decade back then, young Padawan!

Specifics on CSS Specificity ~ I love the box graphics here, even though this is much harder than the Billion System for CSS Specificity.

W3 spec on specificity in CSS3 ~ Pretty much what I learned this from!  Good reading if you can’t sleep (you will quickly doze off!)

One Response

  1. […] Simple CSS: Specificity for Beginners: Billion System […]

Leave a Reply