Hi i have this code:
.navbar .nav-pills .active > a {
background-color: $NavBgHighlight;
color: $NavTxtColor;
}
.navbar .nav-pills .active > a:hover {
background-color: $NavBgHighlight;
color: $NavTxtColor;
}
I wanted to merge both of the sections into one section, something more like:
.navbar .nav-pills .active > a, a:hover {
background-color: $NavBgHighlight;
color: $NavTxtColor;
}
But it doesnt work that way :( how can i merge both of them? ( I want that the :hover and the normal a will act the same)
You can use SASS selector nesting :
.navbar .nav-pills .active {
> a, > a:hover {
background-color: $NavBgHighlight;
color: $NavTxtColor;
}
}
Which compiles to:
.navbar .nav-pills .active > a, .navbar .nav-pills .active > a:hover {
...
}
.navbar{
&.nav-pills{
&.active {
> a, > a:hover {
background-color: $NavBgHighlight;
color: $NavTxtColor;
}
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.