ansaurus

Question

CSS Inheritance: Overriding a parent selector that is a decendant selector

Answer 1

+5 A:

Use a.child as the selector.

<html>
    <head>
        <style>
            .parent a { color:Red; }
            a.child { color:Blue; }
        </style>
    </head>
    <body>
        <div class="parent">
            <a class="child" href="http://www.stackoverflow.com"&gt;
                stackoverflow
            </a>
        </div>
    </body>
</html>

Obalix 2010-02-26 21:41:10

Answer 2

+5 A:

This is due to CSS specificity. The extra a after .parent makes it more specific than just .parent, and correspondingly, more specific than just .child. Obalix's suggestion gives the selectors the same specificity, with both having a base HTML element and a class designation. When specificity is equal, it will then apply the deepest value specified in the hierarchy, as you were expecting.

This article (and the resources to which it links) do a great job explaining CSS specificity: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Scott Cranfill 2010-02-26 21:49:12

ansaurus

tags:

views:

answers:

CSS Inheritance: Overriding a parent selector that is a decendant selector

related questions