2
<!DOCTYPE html>
<html>
    <head>
        <title>my test code</title>
        <style>
            #h1id {color: blue;}
            h1:active {color: red;}
            h3:hover {color: red;}
            .h3class {color: blue;}
        </style>
    </head>
    <body>
        <h1 id="h1id">id test</h1>
        <h3 class="h3class">class test</h3>
    </body>
</html>

in this code

h3 selector is working but h1 selector isn't working.

Why doesn't h1 selector working? (h1:active {color: red;})

More question.

----Add my code----

1.

<!DOCTYPE html>
<html>
    <head>
        <title>my test code</title>
        <style>
            #atag {color: red;}
            a:hover {color: blue;}
        </style>
    </head>
    <body>
        <a href="http://www.google.com" id="atag">a tag test</a>
    </body>
</html>

2.
<style>
  a {color: red;}
  #atag:hover {color: blue;}
</style>

3.
<style>
  a {color: red;}
  a:hover {color: blue;}
</style>

4.
<style>
  #atag {color: red;}
  #atag:hover {color: blue;}
</style>

2, 3, 4 work very well in chrome, explorer

1 doesn't work.

Pseudo-class :hover or :active

Please let me know the reason.

Suhwan
  • 23
  • 4
  • it's all about specificity, ID is more specific than the other selector (inckuding the active one) so it will win and his style will always get applied – Temani Afif Dec 29 '19 at 08:05
  • how about class selector? in style. a {color: red;} .atag:hover {color: blue;} it work well. and .atag {color: red;} a:hover {color: blue;} it also work well. – Suhwan Dec 29 '19 at 13:01
  • (a:hover) < (.atag:hover) priority. – Suhwan Dec 29 '19 at 13:04

1 Answers1

-2

Short answer, it doesn't work because an <h1> element, by itself, can never be active.

Long answer, quoting directly from https://developer.mozilla.org/en-US/docs/Web/CSS/:active

  • The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.

    /* Selects any <a> that is being activated */

    a:active { color: red; }

The :active pseudo-class is commonly used on <a> and <button> elements. Other common targets of this pseudo-class include elements that contain an activated element, and form elements that are being activated through their associated <label>.

ecg8
  • 1,177
  • 1
  • 10
  • 15