4

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.

Improve this question

2 Answers 2

Reset to default
9

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}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Sorry, I've heard people refer to how close an attribute is as "locality", so I just ripped off the term. Thank you for your response, I wasn't sure if the pseudo-class was additive. Very helpful!
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)

Improve this answer

1 Comment

Thank you for breaking this down even further, and the extra tip for :link!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.