css doesn't apply on default selected nav-link in vue 3 project with bootstrap 5-CodePudding

my first time, be patient pls.

I want to highlight the selected nav-link, it works well but the first one (small), doesn't highlight.

Even when i select the other ones, (medium or large, that do change the color), and select the first one (small) again, small won't change its color.

and its also just black at the beginning.

here my code , I am using vue and bootstrap is installed

<template>
  <div >
    <nav>
      <div  id="nav-tab" role="tablist">
        <button
          
          id="nav-ssprinter-tab"
          data-bs-toggle="tab"
          data-bs-target="#nav-ssprinter"
          type="button"
          role="tab"
          aria-controls="nav-ssprinter"
          aria-selected="true"
        >Small
        </button>
        <button
          
          id="nav-msprinter-tab"
          data-bs-toggle="tab"
          data-bs-target="#nav-msprinter"
          type="button"
          role="tab"
          aria-controls="nav-msprinter"
          aria-selected="false"
        >
          Middle
        </button>
        <button
          
          id="nav-xlsprinter-tab"
          data-bs-toggle="tab"
          data-bs-target="#nav-xlsprinter"
          type="button"
          role="tab"
          aria-controls="nav-xlsprinter"
          aria-selected="false"
        >
          big
        </button>
      </div>
    </nav>
    <div  id="nav-tabContent">
      <div
        
        id="nav-ssprinter"
        role="tabpanel"
        aria-labelledby="nav-ssprinter-tab"
        tabindex="0"
      >
Small text
      </div>
      <div
        
        id="nav-msprinter"
        role="tabpanel"
        aria-labelledby="nav-msprinter-tab"
        tabindex="0"
      >
      medium text
      </div>
      <div
        
        id="nav-xlsprinter"
        role="tabpanel"
        aria-labelledby="nav-xlsprinter-tab"
        tabindex="0"
      >
      big text
      </div>
    </div>
  </div>
</template>




<script>

export default {
  components: {},
  methods: {},

};
</script>

<style>
.car-head{
color: black !important;
font-weight: bold !important;
}
 .car-head   .active {
  color: rgb(243, 158, 0) !important;
  background: rgb(220, 220, 220) !important;

}
</style>

i have checked the id's and classes and changed the order in the css part at the bottom, it helped at a different problem don't didn't solved this one.

i hoped to find a mistyping in class names for the small nav-link, because, I see no other reason that it's color is always black, at the beginning (default selected) and when I select It after selecting something else.

CodePudding user response：

You are using the selector, which means: select the adjacent next sibling. So this will only work in certain scenarios.

In your example I suppose you want style the car-head class when it has the active class. In that case you will need to use this selector combination: .car-head.active

Read up on CSS selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Or in a great video explanation: https://www.youtube.com/watch?v=l1mER1bV0N0

.car-head {
  color: black !important;
  font-weight: bold !important;
}

.car-head.active {
  color: rgb(243, 158, 0) !important;
  background: rgb(220, 220, 220) !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div>
  <nav>
    <div  id="nav-tab" role="tablist">
      <button  id="nav-ssprinter-tab" data-bs-toggle="tab" data-bs-target="#nav-ssprinter" type="button" role="tab" aria-controls="nav-ssprinter" aria-selected="true">Small
        </button>
      <button  id="nav-msprinter-tab" data-bs-toggle="tab" data-bs-target="#nav-msprinter" type="button" role="tab" aria-controls="nav-msprinter" aria-selected="false">
          Middle
        </button>
      <button  id="nav-xlsprinter-tab" data-bs-toggle="tab" data-bs-target="#nav-xlsprinter" type="button" role="tab" aria-controls="nav-xlsprinter" aria-selected="false">
          big
        </button>
    </div>
  </nav>
  <div  id="nav-tabContent">
    <div  id="nav-ssprinter" role="tabpanel" aria-labelledby="nav-ssprinter-tab" tabindex="0">
      Small text
    </div>
    <div  id="nav-msprinter" role="tabpanel" aria-labelledby="nav-msprinter-tab" tabindex="0">
      medium text
    </div>
    <div  id="nav-xlsprinter" role="tabpanel" aria-labelledby="nav-xlsprinter-tab" tabindex="0">
      big text
    </div>
  </div>
</div>

CodePudding user response：

use anchor tag and :visited instead of button

example :

   

.car-head:visited{
   background-color : blue;
}