Forums

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
    Posts
  • October 24, 2013 at 11:16 pm #153989
    jaypatel
    Participant

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

    <html>
<head>
    <style>

    #main{
    color:red !important;
    }

    .heading {
    color:blue;
    }

    </style>
</head>
    <body>

        <div id="main">

        <h5 class="heading" >test</h5>

        </div>

    </body>
</html>
    October 25, 2013 at 1:25 am #153997
    Paulie_D
    Member

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

    http://cssspecificity.com/

    EDIT—-except not in this case? :http://codepen.io/Paulie-D/pen/wxFsn

    Edit. 25 October 2013 13.02GMT

    October 25, 2013 at 2:19 am #153998
    Tomasz Lisiecki
    Participant

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

    October 25, 2013 at 2:50 am #153999
    surbhi
    Participant

    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

    October 25, 2013 at 5:05 am #154001
    Paulie_D
    Member

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

    But it’s not :http://codepen.io/Paulie-D/pen/wxFsn

    October 25, 2013 at 5:49 am #154004
    Tomasz Lisiecki
    Participant

    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?

    October 25, 2013 at 6:40 am #154008
    lukefrake
    Participant

    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 :)

    October 25, 2013 at 8:12 am #154029
    wolfcry911
    Participant

    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.

    October 25, 2013 at 8:14 am #154030
    Paulie_D
    Member

    ….and there you have it.

    October 25, 2013 at 11:16 pm #154093
    jaypatel
    Participant

    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 )?

    October 25, 2013 at 11:28 pm #154094
    jaypatel
    Participant

    @wolfcry911__

    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..?

    October 25, 2013 at 11:54 pm #154097
    jaypatel
    Participant

    @Tomasz Lisiecki

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

    October 26, 2013 at 5:40 am #154105
    wolfcry911
    Participant

    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.

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