선택자가 아닌 강력한 CSS

This article was originally posted on my personal blog.
:not() CSS 선택기는 의사 클래스 도구 벨트에 추가된 강력한 기능으로, 해당 인수에서 생략된 요소를 선택할 수 있습니다.

기본 :not() CSS 선택기 예제

여기에 예가 있습니다. 몇 가지 클래스를 설정했습니다. 하나는 모든 버튼에 기본 스타일을 적용하고, 하나는 기본 버튼의 스타일을 설정하고, 다른 하나는 기본 비활성화 버튼의 모양을 결정합니다.

📢 I’m using SCSS in the example below to gain the benefit of class nesting and variables, but the application of the :not() selector is the same.

.button {
  border: none;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
    margin-top: 1rem;
}

.button--primary {
  background: $button--primary;
  color: white;
}

.button--disabled {
  background: $button--disabled;
  cursor: auto;
}

접근성에 맞추기 위해 hover 상태에 있을 때 버튼의 배경이 변경되는 것이 중요합니다. 충분히 간단합니다. 여기에 변화가 있습니다.

.button--primary:hover {
  background: $button-primary-hover;
}

그러나 :hover 선택자를 추가한 후 문제가 발생했습니다. 비활성화된 버튼 위로 마우스를 가져가면 활성 기본 버튼 위로 마우스를 가져가는 것처럼 배경이 변경됩니다.



이 문제를 어떻게 해결할 수 있습니까? :not() 선택기를 사용하면 비활성화되지 않은 기본 버튼에만 변경 사항이 적용되도록 쉽게 수정할 수 있습니다!

.button--primary:hover:not(.button--disabled) {
  background: $button-primary-hover;
}

📢 Instead of using a class to determine if the button is disabled, I could have opted to use the :disabled attribute. I think the examples above are a bit easier to follow.

:not 선택기에 대한 브라우저 호환성

고맙게도 :not() 선택기는 대부분의 주요 브라우저에서 지원됩니다.

예외를 보려면 caniuse.com을 확인하십시오.

결론

이 기사에서는 :not() 선택기에 대해 간략히 설명하고 실제 예를 살펴보았습니다. 이 선택기를 사용할 때 다양한 옵션이 열립니다. 어떤 응용 프로그램을 생각할 수 있습니까?