Not the css specificity guide you deserve, but the one you need right now.


The Page

The place containing the many things that make up Gotham City.


ID Selector

There can only be one Batman (id) in Gotham City (the page).

ID's have a higher specificity than classes, pseudo-elements/classes and attributes.

Strength 1:0:0


Class selector

There are many robins, they come and go and sometimes exist at the same time.

It doesn’t matter how many robins you have, you cannot beat Batman.

Strength 0:1:0

The Batmobile

Attribute selector

Attributes e.g. [target] are Batman's major gadgets, like the Batmobile. They work on their own, but also when added to a Batman or a Robin you get a strength boost.

It doesn't matter how many gadgets Robin has he still can't beat batman.

Strength 0:1:0

Utility Belt

Pseudo-element/class selector

Pseudo-elements/classes are the utility belt, they aren't very useful on their own but when you add them to something else they increase your strength.

Strength 0:1:0


Element Tag Selector

Elements are like Alfred. Batman and Robin can't live without him, but he can't beat Batman or Robin in a fight.

Strength 0:0:1

Bruce Wayne

Inline Styles <styles>

Batman must always protect his secret identity so Bruce will override any Batman that might exist.

Bruce Wayne (like inline styles) exist publicly in Gotham (the page). Batman and the rest of the css exists in the external stylesheet.

Strength Power: 1:0:0:0

The Bomb


!important is a nuclear weapon. Use this and you've defeated Batman, Robin, Alfred and their gadgets. With great power comes great responsibility, don’t abuse it.

Strength 1:0:0:0:0