CSS Specificity explained with a "Star Wars" theme 

"Join me, and together we can rule the galaxy as father and geeks!"

If you say "Star Wars" to me I will most likely stop what I am doing and pay close attention. 

So when I found this great article on a somewhat confusing subject of "CSS Specificity" it was required of me as a Star Wars fanboy and as a web designer that I post this for all web techies to read.

Thanks to Andy Clarke for writing up and researching this great article.

Here is an excerpt:

Math was never my strong point, so to help me understand calculating specificity better I made a chart based on the following specificity (or Sith power) values (Ed says: Ignoring inline styles and !important).

element selector

class selector

id selector
Sith power (specificity): 0, 0, 1
Sith power (specificity): 0, 1, 0
Sith power (specificity): 1, 0, 0

Each character (selector) is given its own Sith power (specificity value) depending on how powerful they are in the ways of the Dark Side. A storm trooper is less powerful than Vader who is in turn less powerful than the Emperor.

Posted by Joe Vago Tuesday, April 30, 2013 11:14:00 AM Categories: CSS
-November 2019+
  • RSS
  • Add To My MSN
  • Add To Windows Live
  • Add To My Yahoo
  • Add To Google


  • Entries (8)
  • Comments (0)