Why base hover color is not applying

Question

I'm facing a problem in css of the <a> element, This page is using Bootstrap Tab component. All tabs are connected with their corresponded links. By default css of the page has some base styles for <a> element i.e.

a {
    color: black;
}

a:hover {
    color: red;
}

On Tab there is ul element which has some links. I changed the color of links that are in ul element. But why hover color of the link is not changing to its base hover color? I only change the normal color not hover state color Why this happening?

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
          a {
          color: black;
       }

       a:hover {
          color: red;
       }

       .list > li > a {
          color: yellow;
       }
    </style>
    <title></title>
</head>
<body>
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab4">Tab 4</a>
        </li>
    </ul>
    <div class="tab-pane active show fade" id="tab1">
        <ul class="list">
            <li>
                <a href="#">Apple</a>
            </li>
            <li>
                <a href="#">Banana</a>
            </li>
            <li>
                <a href="#">Orange</a>
            </li>
            <li>
                <a href="#">Apricot</a>
            </li>
        </ul>
    </div>
    <div class="tab-pane active show fade" id="tab2"></div>
    <div class="tab-pane active show fade" id="tab3"></div>
    <div class="tab-pane active show fade" id="tab4"></div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
    </script> 
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js">
    </script>
</body>
</html>

score 1 · Answer 1 · answered Jul 09 '18 at 17:58

The selector .list > li > a has precedence over both a and a:hover selectors.

You can do the following:

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
  <style>
    a {
      color: black;
    }
    
    a:hover {
      color: red;
    }
    
    .list > li > a:not(:hover) {
      color: yellow;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js">
  </script>

  <title></title>
</head>

<body>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab4">Tab 4</a>
    </li>
  </ul>
  <div class="tab-pane active show fade" id="tab1">
    <ul class="list">
      <li>
        <a href="#">Apple</a>
      </li>
      <li>
        <a href="#">Banana</a>
      </li>
      <li>
        <a href="#">Orange</a>
      </li>
      <li>
        <a href="#">Apricot</a>
      </li>
    </ul>
  </div>
  <div class="tab-pane active show fade" id="tab2"></div>
  <div class="tab-pane active show fade" id="tab3"></div>
  <div class="tab-pane active show fade" id="tab4"></div>
</body>

</html>

score 0 · Accepted Answer · answered Jul 09 '18 at 17:29

0

You put the color: yellow after you put the color: red which mean that CSS will interpret the color: yellow more important. so you can put the color: red after or add a !important (like this color: red !important).

Hope this help you!

answered Jul 09 '18 at 17:29

Charles-François St-Cyr

329
2
12

Does set color property to `` means it will also apply on hover state – Ven Nilson Jul 09 '18 at 17:48
If you want to applied it only to the hover state, do that `a:hover {color: red !important;}` but if you remove the `:hover`, it will always applied. The `!important`tag simply say to CSS that whatever is mentioned after, it won't change. – Charles-François St-Cyr Jul 09 '18 at 17:51

Why base hover color is not applying

2 Answers2