SCSS에서 클래스 이름을 사용하여 태그를 타겟팅하는 방법 [중복]

Question

다음과 같은 HTML 요소가 있습니다.

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

내 .scss 파일에는 다음 코드가 있습니다.

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

위의 코드는 작동하지 않습니다.

"css를 사용하여 형제 클래스를 대상으로 지정"과 같은 용어를 검색했지만 결과는 아래와 같은 시나리오에 대해 표시됩니다.

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

a버튼 클래스를 사용하여 태그를 어떻게 타겟팅 합니까?

업데이트 :

부모 요소를 대상으로하지 않습니다. 특정 클래스가 사용되는 요소를 대상으로해야합니다.

Answer 1

태그 이름 뒤에 a.class_name, div.class_name또는 a#class_name, 같은 선택자 (클래스 또는 ID) 이름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>