How to make a component to use a specific css when both id and class is set

Question

I have a component (say a div) where I had set style for both the id and class.

I have to use the specific styles (id or class) depending upon the event, which I guess can be done by JavaScript. Is this possible? Please help!!!

Answer 1

Consider i have a div with id=div1 & class=divstyle. And in css if i have set style for both #div1 and .divstyle which style will be used by the div? wheather the style defined for the id(#div1) or class (.divstyle)?. My question is how can i use js to make the div to use the style #div1 and .divstyle depending upon any event-triggered such as button click.

Answer 2

Based on your question, if you have a div with both id and class defined, both the styles from stylesheet will be used. But then the one which gets used last will overwrite the previous styles. The best thing for you to avoid confusion is to use only one element for defining style. Either class or id, dont have both defined in your DIV. Personally I feel there is no event or trigger which will make you forcibly use the specific styles as you need. Also dont see a need why you need to define both class and id styles in your stylesheet. Please avoid using both if possible.

Answer 3

In my case i have an styled alert which displays both success and error cases. By default the alert will have the id style as common alert (neither success nor failure). So depending upon the validation with js i need to change the alert to use the style success class or failure class without letting that alert to use the style defined with id. Hope you understand my scenario.