The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS specificity confusion in #id and class selectors

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #153989

    this is my code. according to me heading should be red but its not working.. can anyone explain..y..?

        color:red !important;
        .heading {
            <div id="main">
            <h5 class="heading" >test</h5>

    You’ve used !important….that beats everything.

    EDIT—-except not in this case? :

    Edit. 25 October 2013 13.02GMT

    Tomasz Lisiecki

    Exactly. Just get rid of the !important bit and it should work. See here


    No, if you want to add red color in heading. you should add red color in heading class. or else remove color from heading class.

    And, there is no use of !important


    Wait…he’s right…shouldn’t it be red?

    But it’s not :

    Tomasz Lisiecki

    Oh I misread at the first place. He wants it to be red, not blue.

    I think !important rule only applies to the same type of elements and also goes from the less-specific to more-specific selectors. Basically, the general element CSS can overwrite ID or class CSS even if it occurs lower in the code.

    I made an example here PEN

    What you think?


    Tomasz Lisiecki is right, important wins on everything but doesn’t affect child elements the same way.

    .heading {background-color:blue!important}

    If you took the heading class out it will be red :)


    Disregard the !important altogether – it plays no role here (and should almost never be used anyway).

    The confusion here is in the difference between inheritance and specificity. You’re assuming that the children of main will inherit the #main color – which they will; unless declared a color. The fact that the parent has a higher specificity doesn’t matter because you haven’t declared the child in the rule selector. If you had a rule #main h5 { color: red; } then you’d get the expected result, but assumed inheritance cannot override a direct rule.


    ….and there you have it.


    thanks all for reply ..
    but i dot want to color my heading blue or red.. i want to know what specificity both rule have. (with !important and without it )?



    thanx buddy … :) but, i m still confused… :(

    consider these rules..

    main{ color:red }

    .heading { color:blue; }

    does these both have same specificity?

    do you know any good tutorial or book on specificity..?


    @Tomasz Lisiecki

    sorry by mistake i had click on report. on ur post


    You certainly don’t need a book on specificity. Just visit a few articles on it and I’m sure you’ll grok it. The issue here, as I mentioned, isn’t specificity but inheritance. An ID does have a higher measure of specificity than that of a class, but you’re not applying both to the same element. On is applied to the parent and one to the element. A parent’s specificity level won’t overpower that of a child’s based on inheritance. As I mentioned earlier, had you directly targeted the element using the parent’s ID in a descendant selector then the one with the ID would have won out.

    #main { color: red; } and assuming no class on the header, the h5 inherits the red. But it would inherit any color the parent had – regardless of the id, class, or specificity of that parent. As soon as you target the h2 directly (with the class). The inheritance is thrown out.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.