0

I have following html code.

<h1 class="one">Hello</h1>

And following is the corresponding CSS style sheet applied to it.

h1:hover {
    color: red;
}

h1.one {
    color: blue;
}

This causes h1 to turn blue, but the after hovering over the element, it doesn't change the color to red. What's wrong ?

Thanks

user9026
  • 852
  • 2
  • 9
  • 20

2 Answers2

1

Reorder your css to:

h1.one {
    color: blue;
}

h1:hover {
    color: red;
}
Steve Williams
  • 128
  • 1
  • 7
  • Steve, your solution works. But I want to know what is wrong in my approach. I checked with specificity calculator and both have same specificity. – user9026 Jul 24 '21 at 10:53
  • @user9026 *both have same specificity* --> and you have your answer, read the duplicate now – Temani Afif Jul 24 '21 at 10:55
  • Equal specificity: the latest rule counts - If the same rule is written twice into the external style sheet, then the lower rule in the style sheet is closer to the element to be styled, and therefore will be applied – Steve Williams Jul 24 '21 at 10:58
  • I understand that both have the same specificity, but both parts do not cause the same action. Specificity rules apply when there is conflict as to which rule should apply. But here, first part concern the hovering and second part is about the actual color. So, there is no conflict. – user9026 Jul 24 '21 at 11:02
  • When you hover it has 2 rules to choose from, the class and the hover. Since you have the class listed last, and they are the same specificity, it is always selected, even when you hover. – Steve Williams Jul 24 '21 at 11:05
  • Steve, does `h1` have any default hover state ? It seems to be the case. Only in that case, we could have blue color on hovering. Because, the second part of my code does not give any explicit hover state.. – user9026 Jul 24 '21 at 11:18
  • You said above that both parts do not cause the same action - they do, a color change. When the page is loaded, and there is no hover, your element is blue. When you hover, then the css is checked to see what rules are defined for color (you have 2 - class and hover). Since they are both the same specificity, it chooses the last rule listed, in this case hover (but in yours, it remains on class). – Steve Williams Jul 24 '21 at 11:21
  • Or maybe more clearly, when you are not hovering, it is matching only the class rule. When you are hovering, it is matching both (h1.one and h1:hover). When multiple rules match, and a property (color) is specified more in more than one rule, it chooses the one you list last if they are at the same specificity level. So in yours it always matches h1.one , but when there is a hover it matches h1.one and h1:hover. Since both are at the same priority level for style application (specificity), it chooses the last one you list, in your case still h1.one. – Steve Williams Jul 24 '21 at 11:29
  • Thanks Steve, since I am new to HTML/CSS its little hard to understand. If I don't have any explicit hover rule, is there default hover color ? Does hover inherit the color from the text color in that case ? – user9026 Jul 24 '21 at 11:56
  • If there is no hover rule then there is no hover defined hover color. Good luck with HTML and beyond =]. – Steve Williams Jul 24 '21 at 15:58
  • If there is no hover rule for an h1 then there is no hover defined. h1 is not a clickable item by default, thus there would be no reason for one by default (an element that does have hover my default would be , for a hyperlink). Most elements do not have hover defined by default (or if I'm wrong technically and they do, it is set to the same color as you set the element to - I'm no css expert but I have dabbled a little). – Steve Williams Jul 24 '21 at 16:04
-1

You should use:

h1.one:hover {
    color: red;
}

h1.one {
    color: blue;
}

Because the more specific selection is chosen by the CSS. So, h1 is ignored when you use h1.one because this specifies the tag more perfectly.

Parvat . R
  • 751
  • 4
  • 21
  • First part says that change color of `h1` while hovering over it and second part says that change color of `h1` itself. So, does specificity come into picture here ? – user9026 Jul 24 '21 at 10:56