원래대로라면 .entry-container h1, .entry-container h2.....
이런식으로 반복적으로 작성해야 할 코드를 :where()를 사용해서 간단하게 줄일수 있다.
비슷한 기능을 하는 :is()도 있는데 예시코드와 같은환경에서는 where을 쓰나 is를 쓰나
별 차이점이 없어보였다.
하지만 복합셀렉터를 쓰게되면 차이점이 드러난다.
See the Pen Untitled by fiercegear (@fiercegear) on CodePen.
is()와 where() 전부 font-color: blue에 font-size가 15px인 상황에서
<a>태그를 white, 30px로 변경하였다.
결과는 :where()는 전부 정상적으로 바뀌었지만 is()는 변동이 없다.
여기서 두 클래스의 차이점을 알수 있다.
:where()는 명시도가 0으로 고정되기때문에 다른 코드의 간섭을 받지만
:is()는 구체적인 명시도를 가지기 때문에 코드간섭을 받지 않는다.