Home/ Questions/Q 8876843
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T19:18:59+00:00

CSS rules applied to IDs have higher priority than class rules, that makes sense.

  • 0

CSS rules applied to IDs have higher priority than class rules, that makes sense. What I don’t get is why this:

<div id="global_button" class="global_button_class"></div>

#global_button
{
   opacity:0.7;
}

.global_button_class:hover
{
   opacity:1;
}

…doesn’t change the opacity when the mouse is hovered over the button, but if I change from:

.global_button_class:hover

…to:

#global_button:hover

…it works. I mean, if the hover state isn’t defined by the id, why doesn’t .global_button_class:hover kick in?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Basically because you have set the opacity property using the elements ID it is setting the state for hover, focus, active etc on that too.

    When you try to set the hover state using the class name you have attached it gets overwridden by the previously stated ID which gets more weight than the class.

    ID > CLASS

    • 0