Search code examples
csscss-specificity

hyperlink css specificity inside a named element

http://jsfiddle.net/DkAqZ/9

HTML

<div id="container">
    <div>default black text</div>
    <div><a href="#">default red link</a></div>
    <div id="inner">
        <div>#inner green text</div>
        <div><a href="#">#inner red link or green text?</a></div>
    </div>
</div>

CSS

body {
    color:black;
}
a {
    color:red;
}
a:hover {
    color:orange;
}
#inner {
    color:green;
    font-size:24px;
}

Looks like this

specificity

I'm not entirely clear on why the second hyperlink is red and not green. isn't the specificity of #inner higher than a? also, the font-size IS inherited on the #inner a so that makes it even more confusing.

Solution

  • No I'm pretty sure that's not the case. If you did:

    #inner a { color:inherit}

    I think that would work, don't have a chance to try it, sorry.

    Edit

    This explains the situation far better: when will "a" tag not inherit color attribute of parent tag?

    Hmmm... ok I just saw your nifty jsfiddle example. That's really nice. Removing the href doesn't seem to fix it, but my solution still works.