:is() 의사 클래스

:is() 의사 클래스는 CSS 선택기 레벨 4에 도입된 기능적 의사 클래스입니다. CSS를 더 간결하고 관리하기 쉽게 만드는 좋은 방법입니다. :is() 의사 클래스는 쉼표로 구분된 선택자 목록을 인수로 사용하여 작성한 선택자를 모두 선택합니다.

 

// 작성
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

// 적용
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

 

CSS 작성시에 더 효율적인 작업이 가능합니다. 

대규모 사이트 작업시에 테마나 같은 사이트 내 다른 영역등에서 공통 값을 적용할때처럼 여러곳에 같은 속성과 속성값을 지정하는데 큰 이점이 있습니다.

 

// 작성
:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
  color: #BADA55;
}

// 적용
section h1, section h2, section h3, section h4, section h5, section h6, 
article h1, article h2, article h3, article h4, article h5, article h6, 
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, 
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
  color: #BADA55;
}

 

:is() 의사 선택기는 요소에 연결할 수 있습니다. 두 클래스 중 하나가 있는 경우 특정 유형의 요소를 선택하는 것과 같습니다.

 

// 작성
div:is(.cool, .fun) {
  color: red;
}

// 적용
div.cool {
  color: red;
}

div.fun {
  color: red;
}

/*
<div class="cool">match</div>
<div class="fun">match</div>
<p class="fun">not match</p>
*/

 

:is()와 :where()의 차이

:where()는 :is() 의사 클래스와 가장 유사한 기능을 갖는 의사 클래스 입니다. 사용법은 :is()와 완전 같습니다.그럼 왜 둘을 만들었을까요?

 

두 의사 클래스는 다음과 같은 차이가 있습니다.

• :is(): 전달된 선택자의 특이성을 고려합니다. 요소가 :is() 목록의 선택자와 일치하는 경우 전체 계산에서 해당 선택자의 특이성이 고려됩니다. 예를 들어 :is(.class1, #id1)이 있고 요소가 #id1과 일치하는 경우 규칙의 특이성은 ID 선택자(특이성이 더 높음)를 기반으로 계산됩니다.
• :where(): 전달된 선택자의 특이성을 무시합니다. :where()에 어떤 선택자를 입력하든 상관없이 특이성이 0,0,0,0인 것처럼 처리됩니다. 예를 들어 :where(.class1, #id1)이 있고 요소가 #id1과 일치하는 경우 :where()가 특정성을 무효화하므로 규칙의 특정성은 여전히 0입니다.

 

CSS 선택자의 특이성

CSS 특이성은 브라우저가 요소에 적용해야 하는 CSS 속성을 결정하는 데 사용하는 일련의 규칙입니다. 이것은 스타일을 적용하는 데 사용되는 선택기에 따라 결정됩니다. CSS에서 선택자는 서로 다른 "특이성 점수" 또는 "가중치"를 갖습니다. 점수가 높을수록 우선 순위가 높습니다.

 

CSS의 특이성은 일반적으로 다음 규칙에 따라 계산됩니다.

1. 인라인 스타일(HTML에서 요소의 "style" 속성에 추가됨)은 가장 높은 특이성을 갖습니다.
2. ID 선택자(#someId)는 특이성이 높습니다.
3. 클래스 선택자(.someClass), 속성 선택자([type="text"]) 및 의사 클래스(:hover)는 중간 정도의 특이성을 가집니다.
4. 요소 선택자(h1, div, p) 및 의사 요소(::before, ::after)는 특이성이 낮습니다.
5. 범용 선택자(``), 연결자(+, >, ~, ' ') 및 부정 의사 클래스(:not())는 특이성에 영향을 미치지 않습니다.

특이성은 종종 a, b, c, d의 네 가지 숫자로 시각화됩니다.

• a는 인라인 스타일을 계산합니다.
• b는 ID를 계산합니다.
• c는 클래스, 속성 및 의사 클래스를 계산합니다.
• d는 요소 및 의사 요소를 계산합니다.

예를 들어, h1#heading.myClass:first-child 규칙의 특이성은 0,1,2,1입니다.

• *h1은 요소 선택자이며 요소 수('d')에 '1'을 기여합니다.*
• *#heading은 ID 선택기이며 ID 수('b')에 '1'을 기여합니다.*
• *.myClass 및 :first-child는 각각 클래스 및 의사 클래스 선택자이며 각각 클래스 수('c')에 '1'을 기여합니다.*

"점수"의 개념은 특이성을 이해하는 데 유용하지만 기본 10진수 시스템으로 작동하지 않습니다. 예를 들어, 0,1,10,0의 특이성은 0,2,0,0의 특이성과 같지 않다는 의미입니다.

 

:where()의 사용이유

:where()를 사용하게 되면 다음과 같이 일반적인 선택자보다 우선순위기 밀리게 됩니다.

:where(h1, h2, h3) {
  color: red;
}

h1 {
  color: blue;
}

 

위 예제의 경우처럼 작성되면 h1의 컬러는 blue가 됩니다. 이처럼 존재감 없는 :where()는 언제 사용하게 될까요?

:where() 의사 클래스는 스타일을 광범위하게 적용하고 싶지만 해당 스타일이 더 구체적인 규칙을 무시하는 것을 원하지 않을 때 유용할 수 있습니다. 

즉 기존에 작성된 Style이 적용된 선택자는 절대 건드리면 안된다는 조건이 있을때 유용하게 사용할 수 있습니다. 결국 기존에 선택한적 없는 선택자만 스타일을 적용 시킬 수 있습니다. 또는 첫 스타일 적용시 테마가 적용될 경우 선택자의 속성값들이 반드시 변경되어야 할 경우 유용하게 사용 됩니다.

테마가 적용되면 변경되어야 할 선택자들의 기본 스타일은 :where()로 작성하고 적용될 테마는 :is()로 작성한다면 우선순위가 적용된 :is()로 작성된 테마 스타일이 무조건 적용됩니다.

 

유효성의 인식 (Forgiving Selector Parsing)

일반적으로 CSS에서 선택기 목록이 있고 해당 선택기 중 하나가 유효하지 않거나 지원되지 않으면 전체 규칙(목록의 모든 선택기와 해당 스타일 포함)이 삭제되고 브라우저에서 무시됩니다. 예를 들어:

 

#id1, .invalid^selector, .class1 {
  color: red;
}

 

위의 예에서 .invalid^selector는 유효한 CSS 선택자가 아니기 때문에 전체 규칙이 무시되고 어떤 요소도 color: red 스타일을 갖지 않습니다.
그러나 :is() 및 :where()는 유효하지 않은 선택자를 보다 우아하게 처리합니다. :is() 또는 :where()에 잘못된 선택자를 포함하면 해당 잘못된 선택자는 무시되지만 나머지 규칙은 계속 작동합니다. 

 

// 작성
:is(#id1, .invalid^selector, .class1) {
  color: red;
}

// 적용
#id1 {
  color: red;
}

.class1 {
  color: red;
}

 

위의 예에서 .invalid^selector는 유효한 CSS 선택자가 아니지만 #id1 및 .class1 요소는 여전히 color: red 스타일을 받습니다. 이 기능은 다양한 수준의 CSS 기능을 지원하는 다양한 브라우저에서 작동해야 하는 CSS를 작성할 때 특히 유용할 수 있습니다. :is() 또는 :where() 내부의 모든 브라우저에서 지원되지 않는 선택기를 사용하는 경우 해당 선택기를 지원하지 않는 브라우저는 전체 규칙을 삭제하는 대신 단순히 무시합니다.

 

:is()의 의사요소 선택

:is() 의사 클래스는 의사 요소를 지원하지 않습니다.

// 적용되지 않음
some-element:is(::before, ::after) {
  display: block;
}

// 이렇게 작성 해야 함
some-element::before,
some-element::after {
  display: block;
}

 

:is는 복잡해 질 수 있는 CSS들의 선택자들을 간단하게 작성할 수 있도록 줄여 주는 방법입니다. 단 선택자 우선순위가 변경될 수 있기 때문에 가능하면 같은 선택자 우선순위로 묶어서 작성하는 것을 추천합니다. 그리고 상황에 따라 :where를 :is()와 같은 곳에 사용해야 하는 경우 :is()는 :where()의 대체 스타일을 적용하는 경우에 사용하도록 해야 합니다.