Bootstrap nav-tab styling: some CSS rules apply, others don't-CodePudding

I need to style the nav-tabs by their id. The code for this was working when it had been put in html between bootstrap and css loading, but when moved to base.css only some of this code works (first set of rules). Please tell me what to do so that all the rules are applied:

HTML

<!DOCTYPE html>
<html>
  <head>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

      <link rel="stylesheet" href="css/base.css" />

    <title>Exemplary CSS error</title>

  </head>

  <body>

    <div class ="row" style = "margin-top: 20px; margin-left: 20px">
      <ul  id="timespan-menu">
          <li >
            <a  href="#daily">Daily</a>
          </li>
          <li >
            <a  href="#weekly">Weekly</a>
          </li>
          <li >
            <a  href="#monthly">Monthly</a>
          </li>
        </ul>
  </div>

  </body>
</html>

CSS

#timespan-menu .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background: #CBCBCB;
    border-bottom: 2px solid #343a40;
  }

#timespan-menu .nav-tabs > li.active > a {
    font-size: 13px;
    color: #212529;
}
#timespan-menu .nav-tabs > li > a {
    font-size: 13px;
    color: #6c757d;
}

CodePudding user response：

It's because in your CSS your second and third rules are being applied to child elements of the #timestamp-menu element which have the class .nav-tabs, whereas in your markup the #timespan-menu element has the .nav-tabs class itself.

It works if you just remove the spaces between #timespan-menu and .nav-tabs in your rules, e.g.:

#timespan-menu.nav-tabs > li.active > a {
    font-size: 13px;
    color: #212529;
}

You probably want to tidy your CSS up, though. If you're happy that the styling should be applied by ID then you don't really need to further specify the .nav-tabs class in your second and third rules.