CSS specificity or inheritance?

Question

I've looked at similar questions here but I haven't found one particular to my case.

If I read this article correctly: http://css-tricks.com/specifics-on-css-specificity/

then what is happening doesn't make sense to me. Can someone explain if this is due to locality, inheritance or specificity please? I've stripped out all the unrelated css.

CSS

a:link {font-size:0.875em;color:#005984}
.button {color:#fff}

HTML

<a class="button">Awesome call to action</a>

I end up with a button that has blue text, instead of white. Now, a is an element, so it should have lower specificity than the .button class, should it not?

Thanks for your time.

Answer 1

This is due to specificity: although a is an element type selector which is less specific than a class selector, it's accompanied by a :link pseudo-class which is equally specific to your .button class. A type + pseudo-class will therefore be more specific than a class.

There is no inheritance going on here as there are no parent element styles that I can see being applied to your element. Inheritance refers to adopting styles from parent elements. When you see the link displaying blue instead of white, that's the cascade at work, not inheritance.

Locality isn't a CSS term (at least not in its glossary), so I'm not sure what you mean by that.

If you need your call-to-action button to be white, simply give it the a selector as well, so your selectors are equally specific and the last declaration will take precedence:

a:link {font-size:0.875em;color:#005984}
a.button {color:#fff}

Answer 2

A selector's specificity is calculated as follows:
- count the number of ID selectors in the selector (= a)
- count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
- count the number of type selectors and pseudo-elements in the selector (= c)
- ignore the universal selector

Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

So:

a:link
- a=0
- b=1
- c=1
- Result = 011

.button
- a=0
- b=1
- c=0
- Result = 010

Result: a:link is higher than .button.

Fix: :link won't work on anything but a tags anyway, so specifying a:link is redundant. Use :link instead, and that will fix the problem (provided .button is defined after :link)