초보자를 위한 CSS :where() 셀렉터 가이드: 쉽고 빠르게 배우기

안녕하세요 찐망고 입니다.

오늘은 `:where()`셀렉터 관련 포스팅을 해볼건데요.

 

 `:where()`와  `:is()`는 둘다 CSS4초안에 소개된 새로운 기능입니다.

이전글에서  `:is()`셀렉터 관련 포스팅을 보고 오시길 추천합니다.

CSS의 :is() 클래스 활용하기

 

 `:where()` 셀렉터는 여러개의 셀렉터를 한꺼번에 그룹화 할 수 있으며, 셀렉터의 구체성을 0으로 만듭니다.

셀렉터를 한꺼번에 그룹화한다 그건  `:is()`와 같죠

 

저번   `:is()` 셀렉터는 특이성이라는 말이 나왔는 데  `:where()` 셀렉터는 구체성이라는 말이 나오네요?

CSS구체성 규칙에서 우선순위가 매우 낮다는 것을 의미하는데요.

결론적으로 우선순위가 가장 낮아 다른 셀렉터와 충돌할 가능성이 줄어드는거죠

내가 한꺼번에 셀렉터를 그룹화하여 여러요소에 기본스타일을 적용할거다 하면  `:where()`셀렉터를,

높은 우선순위의 스타일을 적용하고자 하면 `:is()`셀렉터를 사용하면 됩니다

 

 

예시를 볼까요?

<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<p class="important">This paragraph is important.</p>
<p class="highlight">This paragraph is highlighted.</p>

 :where(h1, h2, h3) {
    color: blue;
}
:where(.important, .highlight) {
    background-color: yellow;
}

 

• :where(h1, h2, h3)는 h1, h2, h3 태그를 모두 선택합니다. 
  h1, h2, h3 태그는 파란색 텍스트를 가집니다.
• :where(.important, .highlight)는 클래스가 important 또는 highlight인 요소를 모두 선택합니다.
  클래스가 important 또는 highlight인 p 태그는 노란색 배경을 가집니다.

 

 

:where()와 :is()셀렉터를 같이 써볼까요?

<p class="highlight">This paragraph is highlighted.</p>
<p class="important">This paragraph is important.</p>
<p>This is a normal paragraph.</p>

p {
    color: black;
}

/* :is() 셀렉터 */
:is(.highlight, .important) {
    color: red;
}

/* :where() 셀렉터 */
:where(.highlight, .important) {
    color: blue;
}

• highlight 클래스가 있는 첫 번째 p 태그는 빨간색 텍스트를 가집니다.
• important 클래스가 있는 두 번째 p 태그는 빨간색 텍스트를 가집니다.
• 일반 p 태그는 여전히 검은색 텍스트를 가집니다.