:where() CSS pseudo selector

Table of Contents

• 들어가기 전에
• :where()
• MDN 예제 이해
• Forgiving Selector Parsing

들어가기 전에

다음의 짧은 HTML, CSS code 를 보고 렌더링 결과를 예측해보자. MDN에서 가져온 예제다.

<ol>
	<li>Saturn</li>
	<li>
		<ul>
			<li>Mimas</li>
			<li>Enceladus</li>
			<li>
				<ol>
					<li>Voyager</li>
					<li>Cassini</li>
				</ol>
			</li>
			<li>Tethys</li>
		</ul>
	</li>
	<li>Uranus</li>
	<li>
		<ol>
			<li>Titania</li>
			<li>Oberon</li>
		</ol>
	</li>
</ol>

ol {
	list-style-type: upper-alpha;
	color: darkblue;
}

:where(ol, ul, ul:unsupported) :where(ol, ul) {
	color: green;
}

:where(ol, ul) :where(ol, ul) ol {
	list-style-type: lower-greek;
	color: chocolate;
}

결과는 다음과 같다.

매우 간단해 보이는 예제지만, :where() 을 처음 마주한다면 혼란스러울 수 있다. 예제를 이해하기 위해 MDN의 설명부터 들여다보자.

:where()

마치 SQL query 문에 쓰이는 WHERE 같은 느낌을 준다. MDN을 보면 다음과 같이 적혀있다.

The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. The difference between :where() and :is() is that :where() always has 0 specificity, whereas :is() takes on the specificity of the most specific selector in its arguments.

:where() 과 :is() 의 차이점에 관한 언급, CSS specificity 에 관한 언급이 눈에 띈다. 우선, :where() selector 의 역할은 해당 selector 의 인자로 주어진 selector list 들 중에 하나라도 맞는게 있으면 그것을 선택하는 것이다.

설명만으로는 충분하지 않을 수 있으니 내가 실제로 Open Props 의 style을 override 해야 했던 경우를 가져와 봤다.

/* Open Props 의 visited anchor tag 에 대한 default style */
:where(a):where([href]):where(:visited) {
	color: var(--brand);
	text-decoration-color: var(--brand);
}

/* 위의 selector 대신 다음처럼 작성해도 동일하다 */
a[href]:visited {
	color: var(--brand);
	text-decoration-color: var(--brand);
}

MDN의 설명처럼 :where() selector 는 인자로 주어진 selector list 중에 하나라도 일치하면 그 요소를 선택한다. 위의 예제에서는 a 태그이면서 href attribute 가 존재하고 :visited pseudo class 를 만족하는 요소를 선택한다. 그렇다면 둘 사이에는 요소 선택의 방식 이외에 어떤 차이가 있는 것일까?

내가 생각하기에 핵심은 CSS specificity 에 있다. :where() pseudo selector 는 specificity 가 0 이다. 즉, :where(a):where([href]):where(:visited) 라는 selector 의 specificity 는 0으로 계산이 된다는 것이다. Specificity 가 0이라는 것은, 해당 selector 를 다른 selector 로 쉽게 덮어쓸 수(override) 있다는 뜻이다.

그래서 추측컨대, Open Props 에서는 본인들의 디자인 시스템을 가져다 쓰는 개발자들이 !important 를 쓰지 않고도 손쉽게 default style 을 수정할 수 있도록 :where() 을 헤비하게 사용한 것이 아닌가 싶다.

MDN 예제 이해

그럼 다시 MDN 예제로 돌아와서 렌더링 결과물을 이해해보자.

CSS 를 한 부분씩 살펴보면 다음과 같다. 설명의 편의를 위해 각 CSS selector 에 번호를 붙였다.

/* 1번 */
/* ol tag selector => specificity 는 (0, 0, 1) */
ol {
	list-style-type: upper-alpha;
	color: darkblue;
}

/* 2번 */
/* ol, ul, ul:unsupported 내부에 존재하는 모든 ol, ul tag 를 가리키는 selector => specificity 는 (0, 0, 0) */
/* (ol ol), (ol ul), (ul ol), (ul ul) 케이스를 모두 아우른다 */
/* ul:unsupported 는 다음 섹션에서 다룬다 */
:where(ol, ul, ul:unsupported) :where(ol, ul) {
	color: green;
}

/* 3번 */
/* ol, ul 안의 ol, ul 안의 ol tag 를 가리키는 selector => specificity 는 (0, 0, 1) */
/* (ol ol ol), (ol ul ol), (ul ol ol), (ul ul ol) 케이스를 모두 아우른다 */
:where(ol, ul) :where(ol, ul) ol {
	list-style-type: lower-greek;
	color: chocolate;
}

이제 결과물을 보면서 한 부분씩 이해해보자.

1. 1번 selector 에 의해 Saturn, Uranus, Titania, Oberon 의 font color 는 darkblue 가 된다.
2. 2번 selector 에 의해 Mimas, Enceladus, Tethys 의 font color 는 green 이 된다.
3. 3번 selector 에 의해 Voyager, Cassini 의 font color 는 chocolate 이 된다.
   1번 selector 와 충돌이 생기지만 1번, 3번 selector 의 specificity 모두 (0, 0, 1) 이므로 더 나중에 선언된 3번 selector 의 스타일로 덮어씌워진다.
   실제로 3번 selector 를 1번 selector 보다 먼저 선언하여 테스트 해보면 Voyager, Cassini 의 font color 가 darkblue 가 되는 것을 확인할 수 있다.

Forgiving Selector Parsing

:where() pseudo selector 에 관해 알아보면서 추가적으로 알게된 부분이 있는데, Forgiving Selector Parsing 이라는 개념이다.

이 개념은 :where() 과 :is() pseudo selector 에만 존재하는 개념이다. 어려울 것은 없다.
:where() 과 :is() 에 인자로 selector list 를 전달해줬을 때, 유효하지 않은(invalid) selector 가 섞여있더라도 제대로 동작한다는 뜻이다.

/* 아래처럼 작성하면 ':unsupported' pseudo class 를 지원하지 않는 브라우저에서는 전체 selector 가 먹통이 된다. */
/* 즉, :valid 에 대한 selector 도 같이 무시된다 */
:valid,
:unsupported {
	/* … */
}

/* 하지만 아래처럼 작성하면 ':unsupported' pseudo class 를 지원하지 않는 브라우저라도 ':valid' 에 대한 selector 는 동작한다 */
:where(:valid, :unsupported) {
	/* … */
}