Jump to content

"raw" style overrides class style forever : expected feature or bug?

Recommended Posts

here comes an example stripped from all unnecessary stuff :

            .Kgreen { background-color:green;  display:block; }

        <h1 id="pp" >Hello World!</h1>
            <button onclick="setStyRed()">chg P5 red via js'style</button>
            <button onclick="setStyBlu()">chg P5 blue via js'style</button>
            <button onclick="setClaGre()">chg P5 green via className</button>
                setStyRed=function() { pp.style.backgroundColor ="red" ; }
                setStyBlu=function() { pp.style.backgroundColor ="blue"; }
                setClaGre=function() { pp.classList.toggle("Kgreen") ;   }

setting background-color to green via setClaGre works great...
but once the backgroundColor is set via style, it seems to be impossible to change it again via classes
    (kinda precedence of the forme on the latter?) ...
tried this on good ol'presto based Opera, and rev*cent FFox and Chrome.
Am i doing smthing wrong or is that to be accepted?

any pointer really appreciated, thank you


Share this post

Link to post
Share on other sites

The style attribute always takes precedence over a stylesheet definition. If you want to reset it then use Javascript to set the style to an empty string. 

You should either do everything with classes or everything with the style attribute, don't mix them. The class option is better since the stylesheet gets to decide how to display each element. 

Share this post

Link to post
Share on other sites

thks for the quick reply.

  1. understood about SS>Classes though i'd like a ref. stating so confirming the fact CSS are to be implemented by all browsers that way.
  2. and i cannot agree more on the flexibility of classes as they allow "context changes" to have more predictable behaveour of the elts.

thks again

Edited by Jclu

Share this post

Link to post
Share on other sites

Here's an article by Mozilla explaining the logic that all browsers use to calculate CSS priority:  https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Here's the actual official standard by the W3C, it basically says what Mozilla's article says but in more technical terms:



Share this post

Link to post
Share on other sites

Thank you a lot,

  these articles made it perfectly clear how the precedence (based on specificity and
    some exceptions like "direct styling" targeted here). I find it sad, though,that a
    (page) global option wouldn't exist to override that specific exception (at least)
    without causing the debugging trouble met by "!important".
  bah! i am a mere user that now knows one more thing to be aware of in order to avoid problems :
    1. like you said earlier : no mixing styling methods that "collide"
    2. beware of existing badly written libs that might circumvent that 1st rule
    3. a difficult one at times : specify semantically (classes) as much as possible
        to save time in later evolutions.

now let's enjoy some rainy day 🙂
un grand merci


Edited by Jclu

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...