:not() :is() 및 :where()

:not(selector)는 지정된 선택자와 일치하지 않는 요소를 선택합니다. 선택을 반전합니다.

최신 CSS에서는 :not() 안에 여러 인수를 사용할 수 있습니다. 나열된 선택자 중 어느 것과도 일치하지 않는 요소를 선택합니다:

:not()의 명시도는 가장 명시도가 높은 인수의 명시도와 같습니다. :not(.active)은 클래스 수준의 명시도(0,1,0)를 가집니다.

:is()는 선택자 목록 중 하나와 일치하는 모든 요소를 선택합니다. 그룹화를 단순화하고 반복을 줄여 줍니다.

:is()는 가장 명시도가 높은 인수의 명시도를 사용합니다. 목록에 ID 선택자가 포함되어 있으면 전체 규칙이 ID 명시도를 가집니다.

:is()는 유연한 선택자 해석을 사용합니다. 목록의 선택자 중 하나라도 유효하지 않으면 해당 선택자를 조용히 무시하고 나머지는 계속 적용합니다. 일반적인 쉼표 구분 선택자는 하나라도 유효하지 않으면 전체가 실패합니다.

:where()는 :is()와 정확히 같은 방식으로 작동하지만 명시도가 0입니다. 재정의하기 쉬워야 하는 유틸리티 클래스와 초기화 스타일을 위해 설계되었습니다.

:where()는 명시도 경쟁에서 절대 우선권을 가져서는 안 되는 CSS 초기화와 기본 스타일에 적합합니다:

명시도 동작 요약:

• :is() — 인수 중 가장 높은 명시도
• :where() — 항상 명시도 0
• :not() — 인수 중 가장 높은 명시도

정확하고 읽기 쉬운 선택자를 만들기 위해 함께 사용하십시오:

:is()와 :where()는 모든 최신 브라우저에서 지원됩니다. 여러 인수를 사용하는 :not()도 최신 브라우저에서 지원됩니다. IE11 지원이 필요한 프로젝트에서는 사용하지 마십시오.

인수와 관계없이 명시도가 0인 의사 클래스는 무엇입니까?

:not()은 선택을 반전하며 여러 인수를 받을 수 있습니다. :is()는 목록 중 하나와 일치하고 해당 목록에서 가장 높은 명시도를 사용합니다. :where()도 같은 방식으로 작동하지만 명시도가 0이므로 초기화 스타일에 적합합니다. 세 가지 모두 유연한 선택자 해석을 사용하여 유효하지 않은 선택자를 조용히 무시합니다.