BootstrapVueのTabsで、タブの色を個別に変えたいとき

雑記

BootstrapVueを使って以下のようにTabsを設定したとき、タブごとに色やフォント等のスタイルを変えたい時があると思います。

<b-tabs content-class="mt-3">
  <b-tab title="タブ1" active><p>タブ1です</p></b-tab>
  <b-tab title="タブ2"><p>タブ2です</p></b-tab>
  <b-tab title="タブ3"><p>タブ3です</p></b-tab>
</b-tabs> 
デフォルト状態のタブ
こんなふうにしたい

このb-tabには、独自のクラスをつけることはできないようなので、クラスを分けて色を変えることはできません。

どうするかというと、CSSのfirst-childnth-childを使います。

言われてみれば当たり前のことなのですが、このCSSの存在を知らなかったので結構悩んでしまいました・・・。

具体的に説明すると、ビルド後は、タブ部分は以下のようなリストのコードになっているので、

nav-tabsクラス(ul)内にある指定番目のliタグ(nav-item)のaタグ(nav-link)のスタイルをいじればOKです。

.nav-tabs > li:nth-child(1) > a {
    background-color: aqua;
}
.nav-tabs > li:nth-child(2) > a {
    background-color: brown;
}
.nav-tabs > li:nth-child(3) > a {
    background-color: gold;
}

こうなります!(1番目のタブは選択済みだから白い)
1番目もちゃんと変わってます

当たり前だろとか言わないで・・・。


関連記事