Comment cibler une balise à l'aide d'un nom de classe dans SCSS [duplicate]

Question

J'ai un élément HTML comme suit

<a class="button">Click</a>

Dans mon fichier .scss, j'ai le code suivant.

.button{
  & a{
    color:red;
    
    &:hover,
    &:visited{
      color:blue;
    }
  }
}

Le code ci-dessus ne fonctionne pas.

J'ai essayé de rechercher des termes tels que "cibler une classe fraternelle à l'aide de css", mais les résultats montrent des scénarios comme indiqué ci-dessous.

<a>
  <span class="button">Click</span>
</a>

Comment cibler la abalise à l'aide de la classe button?

Mettre à jour :

Je n'essaye pas de cibler l'élément parent. J'ai besoin de cibler l'élément qui a la classe particulière est utilisée.

Answer 1

nom de la balise suivi du nom du sélecteur (classe ou id) comme a.class_name, div.class_nameou a#class_name,div#class_name

div.button{  /* tag name followed by selector(class or id) name*/)
  &>a{ /*will select only direct '<a> tags' inside div.button */
    color:red;
    
    &:hover,
    &:visited{
      color:blue;
    }
  }
}


div.button{  /* tag name followed by selector(class or id) name*/)
  & a{ /*will select only all '<a> tags' inside div.button */
    color:red;
    
    &:hover,
    &:visited{
      color:blue;
    }
  }
}

div.button{  /* tag name followed by selector(class or id) name*/)
  & a.link{ /*will select only '<a> tags with classname link' inside div.button */
    color:red;
    
    &:hover,
    &:visited{
      color:blue;
    }
  }
}

<div class="button"><a class="link" href=""></a></div>