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
(1)
Sith power (specificity): 0, 1, 0
(10)
Sith power (specificity): 1, 0, 0
(100)

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
-December 2018+
SMTWTFS
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345
  • RSS
  • Add To My MSN
  • Add To Windows Live
  • Add To My Yahoo
  • Add To Google

Statistics

  • Entries (8)
  • Comments (0)