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.

BoltClock · Accepted Answer · 2012-06-12 15:35:40Z

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}

edited Jun 12, 2012 at 15:35

answered Jun 12, 2012 at 15:30

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrick Over a year ago

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!

Niet the Dark Absol · Accepted Answer · 2012-06-12 15:32:42Z

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)

answered Jun 12, 2012 at 15:32

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

1 Comment

Patrick Over a year ago

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

Collectives™ on Stack Overflow

CSS specificity or inheritance?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related