Current course:

CSS Specificity

Speciwhat?!

The word is more complicated than the actual concept

In CSS, "specificity" refers to how specific you reference something.

You've already learned, that when you have two definitions in CSS, the later of the two takes precedence. For example:

img { border: 1px; }
img { border: 0px; }

This will result in the image having no border (0px). Because it was the LAST thing you told it to do.

But what if you did this?:

body img { border: 1px; }
img { border: 0px; }

You'd think it would still be 0px, right? WRONG.

This is where specificity comes into play - the MORE SPECIFIC you are at referencing an item, the more weight it has in it's definition. So in the example above, the top (1px border) would actually take precedence over the line below it.

Think of it as a game - whichever definition has the most points wins:

HTML selector (type selector) - 1 point
Class selector - 10 points
ID selector - 100 points

body img - this has a specificity of 2 (1 HTML selectors, or 1+1)
img - this has a specificity of 1 (1 HTML selector)

And the winner IS..... (drumroll)..... the first one with a score of 2-1.

Another example:

img.artwork { border: 1px; } /* this references an image with the class "artwork" */
img#artwork { border: 0px; } /* this references an image with the id "artwork"

The first has a score of 11 - 1 point for the HTML selector (img) and 10 points for the class selector (.artwork)
The second has a score of 101 - 1 point for the HTML selector (img) and 100 points for the ID selector (#artwork)