Home/ Questions/Q 8080951
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T16:34:18+00:00

<html><head><style type=text/css> #foo { color: blue; } a.bar { color: red; } #foo .baz

  • 0
<html><head><style type="text/css">
    #foo  { color: blue; }
    a.bar { color: red; }
    #foo .baz  { background-color: cyan; }
    a.bar > .baz { background-color: yellow; }
</style></head>
<body>
    <div id="foo">
        <a href="#" class="bar">
            <span class="baz">TEXT</span>
        </a>
    </div>
</body>
</html>

I’m a CSS noob, but my intuition tells me that a.bar is a more specific match for the <span> containing TEXT than #foo, and that TEXT should appear in red with a yellow background. Or if #foo is more specific, then TEXT should be in blue with a cyan background.

Instead, TEXT appears (as tested on Chrome, IE8) in red with a cyan background. How is it that a.bar is more specific than #foo, but #foo .baz is more specific than a.bar > .baz? How would I get this text to appear with red and cyan yellow with the least disruption (smallest set of changes) to the styles I have already specified?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you’re seeing with the text color doesn’t have to do with which selector is applied. Both selectors are being applied, but to different elements. Translated to inline styles your CSS would look like:

    <body>
    <div id="foo" style="color: blue;">
        <a href="#" class="bar" style="color: red;">
            <span class="baz" style="background-color: cyan;">TEXT</span>
        </a>
    </div>
</body>

    background-color: yellow; was overridden by the more specific selector, but your other selectors don’t override each other. They apply to different elements. The span will inherit the color from it’s closest ancestor which has a specified value for color. In this case that is the <a>.

    If you want a yellow background with minimal changes I would suggest making that selector have higher specificity by prepending #foo onto it like #foo a.bar > .baz. Here is a JSFiddle demo.

    • 0