CSS :where() 선택자가 :is() 선택자와 다른 점은?

어려움 MDN Web Docs

보기 및 정답

A :where()는 선택자 우선순위(specificity)가 항상 0이고, :is()는 인자 중 가장 높은 우선순위를 따른다

B :focus-visible은 키보드 탐색뿐만 아니라 마우스 클릭에도 항상 동일하게 적용되어 :focus와 차이가 없다

C :nth-child() 선택자와 :nth-of-type() 선택자는 형제 요소의 타입에 관계없이 동일한 요소를 항상 선택하게 된다

D ::placeholder 의사 요소는 입력 필드에 값이 있어도 표시되지만 :placeholder-shown은 빈 필드에서만 활성화된다

:where()와 :is()는 모두 선택자 목록을 그룹핑하지만, 핵심 차이는 우선순위입니다. :where()의 우선순위는 항상 0이므로 쉽게 덮어쓸 수 있고, :is()는 인자 중 가장 높은 우선순위를 가집니다. :where()는 기본 스타일을 정의할 때 유용합니다.

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

로그인