Clever Geek Handbook

Wildcards in css for all states: hover, focus, etc.?

Is it possible to apply a specific css property to any element states?

For example, the following is not allowed:

.navbar .navbar-nav > .active > a*

Right now I always need to repeat the css classes for each element state a

, like this:

.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: inherit;
}
+3


source to share


5 answers


You can use this,



.navbar .navbar-nav { a:link, a:visited, a:hover, a:active { color:#000; } }
+2


source


Create the class forever:

a.anyState, a.anyState:hover, a.anyState:focus {
   //css code......
}

After that, paste this class into any element a

you want.



<div class="navbar">
  <div class="navbar-nav">
    <div class="active"><a href="#" class="Otherclasses anyState">Working</a></div>
  </div>
</div>

      

        
        
        
      

    

a.anyState, a.anyState:hover,
a.anyState:focus {
   background-color:rgba(0, 0, 0, 0.1)!important;
   color: inherit!important;
}
      

        
        
        
      

    
<div class="navbar">
  <div class="navbar-nav">
    <div class="active"><a href="#" class="anyState">I have class anyState</a></div>
  </div>
</div>
<a href="#">I haven't class anyState</a>
Run codeHide result


+1


source


There is currently no CSS-only solution for your problem.

But as you read your expression, you are tired of repeating the same codes. Understandably, many of us do this. This is why less and sassi comes to the table. You can explore the possibilities by Googling syntax and some tutorials or beginner installations.

After you ask to use less, you need to go. You can create a new function.

Less code:

.states(@color) {
    &:hover, &:focus, &:active { background-color: @color; color: inherit; }
}

Now you can reduce your repetitive code to:

.navbar .navbar-nav > .active > a {
    // all other css code for the 'a' element.

    // this will generator all the states-code defined previously. 
    .states(@color: rgba(255, 255, 255, 0.1));
}
+1


source


How I hate using a selector id

, it works in the case of your example. Instead, provide a link id

and include it.

.red {color:red}

#link {color:green}
      

        
        
        
      

    
<div class="red">
Hello
<a id="link" href="#">Link</a>
</div>
Run codeHide result


0


source


The short answer is no there is nothing like it *

but

If you want to override an existing bootstrap css config, you need to set a more specific selector than these.

for example

.foobar.navbar .navbar-nav > .active > a {
   background-color: rgba(255, 255, 255, 0.1);
   color: inherit;
 }

Or you can do it with, for example! importand [Note: this is bad practice]

.navbar .navbar-nav > .active > a {
   background-color: rgba(255, 255, 255, 0.1) !important;
   color: inherit !important;
 }
0


source






More articles:


All Articles