:is() 함수형 가상 클래스

:is() 함수형 가상 클래스 선택자는
괄호() 안의 선택자 목록 중 하나라도 존재하는지 확인해서 있으면 요소를 선택합니다.

하나 이상의 여러 선택자를 쉼표로 구분하여 묶어, 그 중 하나라도 일치하면 요소를 선택합니다.

괄호() 안의 선택자 목록에 여러 개의 선택자를 사용할 때 사용하는 쉼표(,)는 "또는(or)"이라고 해석합니다. 예를 들어, :is(A, B, C)는 "A 또는 B 또는 C가 존재하면 선택"과 같은 논리적 의미를 가집니다.

:is()는 선택자 존재 여부를 판단하는 기능을 수행하므로, "is(있다, 존재하다)"라는 이름이 사용되었습니다.

구문

CSS 
/* <한 개의 선택자 목록> */
:is(p) {}
:is(.class) {}
:is(#id) {}

/* <여래 개의 선택자 목록>
   쉼표(,)로 구분합니다.
   쉼표(,) 앞 뒤의 띄어쓰기는 없거나 있거나 동일하게 작동합니다.
*/
:is(p, span) {}
:is(.class, p, #id) {}
:is(#id, .classs) {}

알아두세요!
:is()는 :where()와 동일한 구문과 기능을 가지지만, CSS 선택자의 구체성 값(명시도)의 규칙에서 아무런 구체성 값이 없는 :where()와 달리 :is()의 괄호() 안에 지정한 선택자 목록에서 가장 구체성이 높은 선택자의 구체성 값을 그대로 따른다는 것이 다릅니다.

예제

여러 예제를 통해서 :is() 함수형 가상 클래스 선택자의 사용법에 대해 알아보겠습니다.

정말 간단한 예제

다음은 :is() 함수형 가상 클래스 선택자의 사용법의 이해를 위한 정말 간단한 예제입니다.

HTML 
<!-- h4, h5, p 태그들은 서로 다른 요소입니다. -->
<h4>나는 h4 요소입니다.</h4>
<h5>나는 h5 요소입니다.</h5>
<p>나는 p 요소입니다.</p>
CSS 
/* 
  :is(h5) 선택자는 괄호 안의 선택자 목록과 일치하는 h5 요소에만 스타일을 적용합니다. 
  이 규칙은 h5 요소의 글자 색상을 빨간색으로 설정합니다.
*/
:is(h5) {
    color: red;  /* h5 요소의 글자 색상은 빨간색으로 변경됩니다. */
}

/* 
  :is(h4, p)는 괄호 안의 선택자 목록과 일치하는 h4와 p 요소에 스타일을 적용합니다. 
  이 규칙은 h4와 p 요소의 배경색을 yellowgreen으로 설정합니다.
*/
:is(h4, p) {
    background-color: yellowgreen;  /* h4와 p 요소의 배경색을
                                       yellowgreen으로 설정합니다. */
}
실제 적용된 모습

약간 복잡해 보일 수 있지만 유용한 예제 💖

다음의 예제는 :is() 함수형 가상 클래스 선택자의 실제 적용 사례를 보여주며, 여러 선택자를 묶어서 코드의 중복을 줄이고 효율적인 스타일링을 할 수 있다는 점을 잘 설명합니다. 처음에는 약간 복잡해 보일 수 있지만 익숙해지면 매우 유용하게 활용할 수 있습니다.

HTML 
<h4>나는 h4 요소의 <span>span</span>입니다.</h4>
<h5>나는 h5 요소의 <span>span</span>입니다.</h5>
<p>나는 p 요소의 <span>span</span>입니다.</p>
CSS 
/* 
  :is(h4, p) span은 괄호 안의 선택자 목록과 일치하는 h4 또는 p 요소 내부의 내부의 자손인 span 태그에 스타일을 적용합니다.
  즉, h4와 p 요소 내의 모든 span 태그에 background-color를 yellowgreen으로 설정합니다.
*/
:is(h4, p) span {
    background-color: yellowgreen;  /* h4와 p 요소 내 span 태그의 배경색을 yellowgreen으로 변경 */
}

/* 
  위 CSS 코드는 아래와 동일합니다.
  h4 span,
  p span {
      background-color: yellowgreen;
  }
*/
실제 적용된 모습

예제를 통해 알 수 있듯이 :is() 함수형 가상 클래스 선택자는 선택자가 길어지거나 복잡한 경우에 유용하며, 여러 번 반복되는 선택자들을 한 번에 묶을 수 있다는 것이 주요 장점입니다.

CSS 선택자의 구체성 값(명시도)

:is() 자체는 CSS 선택자의 구체성 값(명시도)의 규칙에서 아무런 값이 없습니다.
하지만, 괄호 안의 선택자 목록의 선택자에는 영향을 끼칩니다.

:is() 자체

:is() 선택자는 자체적으로 구체성 값이 없으며, 단지 선택자를 그룹화하는 역할만 합니다. 따라서, :is() 자체는 구체성을 결정하지 않습니다.

괄호() 안의 선택자 목록

:is() 선택자의 괄호 안에 나열된 선택자 목록에서는 각 선택자가 해당 요소를 선택하는 구체성 값에 영향을 미칩니다.
구체성 값은 :is() 괄호 안에서 나열된 선택자 목록 중 가장 구체성 값이 높은 선택자의 값을 따르게 됩니다. 이때, 나머지 목록의 선택자들에게도 동일하게 적용됩니다. 다음의 예제와 관련 설명을 참조하세요.

예제를 통한 설명

HTML 
<h4 id="heading">나는 h4 요소입니다.</h4>
<p class="paragraph">나는 p 요소입니다.</p>
CSS 
/* :is(#heading, p)는 id가 'heading'인 h4 요소와 class가 'paragraph'인 p 요소에 동일한 스타일을 적용합니다. */
:is(#heading, p) {
    background-color: gold;  /* #heading id와 p 요소의 배경색을 gold로 설정 */
}

/* .paragraph는 p 요소의 클래스 선택자로, 배경색을 blue로 설정합니다. */
.paragraph {
    background-color: blue;  /* p 요소의 배경색을 blue로 설정 */
}
실제 적용된 모습
  • :is(#heading, p) 선택자는 #heading(id 속성의 값이 heading인 <h4> 요소)과 p(class 속성의 값이 paragraph인 <p> 요소)에 대해 배경색을 gold로 설정합니다. 하지만, 이때 #heading과 p 선택자의 구체성 값 차이가 중요합니다.
  • #heading의 구체성 값은 #heading이 id를 사용하는 선택자로 구체성 값이 매우 높은 0,1,0,0입니다.
  • p의 구체성 값은 p가 요소 이름 선택자이기 때문에 구체성 값이 낮은 0,0,1,0입니다.
  • 이때, 괄호 안에서 나열된 선택자 목록 중 가장 구체성 값이 높은 선택자의 값을 따르게 됩니다. 즉, p의 구체성 값은 자체적으로 구체성 값이 낮지만 괄호 안에서 가장 구체성 값이 높은 #heading의 구체성 값(0, 1,0,0)을 가지게 됩니다.
  • background-color: blue를 지정한 .paragraph 선택자의 구체성 값은 0.0.1.0이므로, 이보다 더 높은 구체성 값(0, 1,0,0)을 가지는 :is(#heading, p)로 지정한 background-color: gold가 적용되는 것입니다.

:is()와 :where() 선택자의 차이점

:is()와 :where() 선택자는 동일한 구문과 기능을 가지지만, 중요한 차이점이 있습니다.

이 두 선택자의 차이점은 다음과 같습니다.

:is()와 :where() 선택자의 차이점
:is() :is() 자체는 구체성 값이 없으나, 괄호 안의 선택자 목록에서 가장 구체성이 높은 선택자의 구체성 값을 그대로 따릅니다.
:where() :where() 자체나 괄호 안의 선택자 목록의 구체성 값과는 상관없이 항상 0,0,0,0의 구체성 값을 가집니다. 즉 구체성 값도 없고 아무런 영향을 주지 않습니다.

주의할 점

:is()의 괄호 안의 선택자 목록에는 가상 요소 선택자(예: ::before, ::after, ::marker, ::placeholder, ::selection 등)를 사용할 수 없습니다.

따라서, 다음의 예제는 유효하지 않습니다.

CSS 
selector:is(::before, ::after) {
    /* ...*/
}

대신 다음과 같이 다중 선택자를 대신 사용하세요.

CSS 
selector::before,
selector::after {
    /* ...*/
}

활용 예제

:is() 함수형 가상 클래스 선택자는 CSS 선택자를 크게 단순화하고, 코드를 간결하게 할 수 있습니다.
특히 반복적인 계층 구조를 가지는 HTML의 섹션과 제목을 다룰때 유용합니다.

예를 들어 특정 섹션의 제목 요소들의 타일을 지정하는 것은 아주 반복적이고, 코드의 양도 많을 수 있습니다. 다음과 같은 경우가 해당됩니다.

CSS 
article h2,
article h3,
article h4,
article h5,
article h6,
section h2,
section h3,
section h4,
section h5,
section h6,
aside h2,
aside h3,
aside h4,
aside h5,
aside h6 {
    color: blue;
}

:is() 함수형 가상 클래스 선택자를 활용하면 코드를 짧고 이해하기 쉽게 유지하는 데 유리하고, 훨씬 간단합니다.

CSS 
:is(article, section, aside) :is(h2, h3, h4, h5, h6) {
    color: blue;
}

브라우저 호환성

:is() 함수형 가상 클래스 선택자의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
:is() 88 88 82 14

명세서

:is() 함수형 가상 클래스 선택자의 명세서 사양
명세서 사양
:is() Selectors Level 4
#matches-pseudo

참고문헌

같이 보기