CSS :is() 가상 선택자

CSS에서는 특정 요소들을 그룹화하여 스타일을 적용하는 다양한 방법이 있습니다. 그중에서도 :is() 가상 선택자는 복잡한 선택자를 단순하게 만들고, 코드의 가독성을 높이는 데 유용한 기능을 제공합니다. 이번 글에서는 :is() 선택자의 개념과 활용법을 자세히 알아보겠습니다.

1. `:is()` 가상 선택자란?

:is()는 여러 개의 선택자를 하나로 그룹화할 수 있는 CSS 가상 선택자입니다. 안에 포함된 선택자 중 하나라도 일치하면 해당 스타일이 적용됩니다. 이로 인해 중복된 코드 작성을 줄이고, 유지보수를 쉽게 만들 수 있습니다.

`:is()` 기본 문법

:is(selector1, selector2, ...) {
  property: value;
}

예제

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

위 코드에서는 h1, h2, h3 요소의 글자 색상을 모두 빨간색으로 설정합니다.

2. `:is()`의 장점

코드 단순화: 동일한 스타일을 여러 요소에 적용할 때 중복을 줄일 수 있습니다.
가독성 향상: 선택자를 그룹화하여 코드가 깔끔해집니다.
우선순위 유지: 내부 선택자 중 가장 높은 우선순위를 그대로 유지합니다.

3. `:is()`와 `:where()`의 차이점

:is()와 비슷한 역할을 하는 선택자로 :where()가 있습니다. 하지만 두 선택자 사이에는 중요한 차이점이 있습니다.

:is()는 내부 선택자의 우선순위를 유지합니다.
:where()는 항상 우선순위가 0으로 설정됩니다.

비교 예제

/* :is() 사용 */
:is(article h1, article h2) {
  color: blue;
}

/* :where() 사용 */
:where(article h1, article h2) {
  color: green;
}

만약 article h1 { color: black; }가 이미 적용되어 있다면 :is()는 이를 덮어쓰지만, :where()는 덮어쓰지 못합니다.

4. `:is()` 활용 예제

(1) 여러 요소에 공통 스타일 적용

:is(header, footer, section, nav) {
  padding: 20px;
  background-color: #f4f4f4;
}

header, footer, section, nav에 동일한 패딩과 배경색을 적용

(2) 중첩된 선택자 단순화

article :is(h1, h2, h3, h4) {
  font-weight: bold;
  text-transform: uppercase;
}

article 내부의 h1, h2, h3, h4에 굵은 글씨 스타일과 대문자 변환 적용

(3) 폼 요소 스타일링

:is(input, textarea, select, button):focus {
  border-color: blue;
  outline: 2px solid blue;
}

input, textarea, select, button 요소가 포커스를 받을 때 파란색 테두리와 아웃라인 적용

(4) 네비게이션 링크 스타일링

nav :is(a, button) {
  text-decoration: none;
  font-weight: bold;
  color: #333;
}

네비게이션 내의 a 태그와 button에 동일한 스타일 적용

(5) 카드형 레이아웃 스타일 적용

:is(.card, .profile, .product) {
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 16px;
  background-color: white;
}

card, profile, product 클래스가 적용된 요소에 공통된 스타일 적용

5. `:is()` 사용 시 주의할 점

브라우저 호환성
- :is()는 최신 브라우저에서 지원되므로, 구형 브라우저에서는 동작하지 않을 수 있습니다. Can I use에서 지원 여부를 확인하세요.
우선순위 관리
- :is()는 내부 선택자의 우선순위를 유지하므로, 스타일 충돌이 발생할 수 있습니다. 필요하면 명시적으로 우선순위를 조정하세요.

6. 마무리

:is() 가상 선택자는 CSS 코드의 가독성과 유지보수성을 크게 향상시키는 강력한 기능입니다. 여러 선택자를 그룹화하여 중복을 줄이고, 복잡한 스타일 규칙을 간결하게 만들 수 있습니다. 다만, 우선순위가 유지된다는 점을 고려하여 적절히 활용하는 것이 중요합니다.

이제 :is()를 활용하여 더욱 효율적인 스타일링을 해보세요!

1. :is() 가상 선택자란?

:is() 기본 문법

예제

2. :is()의 장점

3. :is()와 :where()의 차이점