Des caractères génériques dans le CSS pour tous les états de a:hover, focus, etc.

Question

Est-il possible d'appliquer une propriété css spécifique à tous les états d'un élément ?

Par exemple, ce qui suit n'est pas valable :

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

À l'heure actuelle, je dois toujours répéter les classes css pour chaque état de l'interface utilisateur. a élément, comme :

.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;
}

Answer 1

Vous pouvez l'utiliser,

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

Answer 2

Créer une classe pour toujours :

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

Après cela, insérez cette classe dans chaque a l'élément que vous voulez.

<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>

Answer 3

Actuellement, il n'existe pas de solution à votre problème basée sur l'utilisation de CSS uniquement.

Mais à lire votre déclaration, vous êtes fatigué de répéter les mêmes codes. C'est compréhensible, beaucoup d'entre nous le font. C'est pourquoi less and sass arrive sur la table. Vous pouvez étudier les possibilités en recherchant sur Google la syntaxe et certains tutoriels ou configurations pour débutants.

Après avoir demandé la possibilité d'en utiliser moins, c'est parti. Vous pouvez créer une nouvelle fonction.

Moins de code :

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

Maintenant vous pouvez réduire votre code de répétition à :

.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));
}

Answer 4

Réponse courte : il n'existe rien de tel qu'un a*.

mais

Si vous voulez remplacer la configuration css existante de bootstrap, vous devez définir un sélecteur plus spécifique qu'ils ne l'ont fait.

Par exemple

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

Ou vous pouvez le faire par exemple avec !importand [Note : c'est une mauvaise pratique].

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

Answer 5

Même si je déteste utiliser id les sélecteurs, cela fonctionne dans le cas de votre exemple. Donnez au lien un id et ciblez-la à la place.

.red {color:red}

#link {color:green}

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