:is() 및 :where() 가상 클래스는 CSS Selectors Level 4 사양의 일부로 도입되었습니다. 이들 가상 클래스는 셀렉터를 보다 간결하게 작성하고, 특정성(특이성) 문제를 해결하는 데 유용합니다.
도입 시기
:is() 및 :where() 가상 클래스는 2019년경 W3C에 의해 CSS Selectors Level 4 사양의 일부로 처음 제안되었고, 이후 다양한 브라우저에 점진적으로 지원되었습니다.
브라우저 호환성
이 가상 클래스는 현대 웹 브라우저 대부분에서 지원됩니다. 다음은 주요 브라우저의 지원 정보입니다.
- Chrome: 88 이상
- Firefox: 78 이상
- Safari: 14 이상
- Edge: 88 이상
- Opera: 74 이상
사용 예시
이 가상 클래스는 현대 웹 브라우저 대부분에서 지원됩니다. 다음은 주요 브라우저의 지원 정보입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS :is() and :where() Example</title>
<style>
:is(h1, h2, h3) {
color: blue;
}
:where(section, article) p {
margin: 20px 0;
color: grey;
}
</style>
</head>
<body>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<section>
<p>section 안에 p태그</p>
</section>
<article>
<p>article 안에 p태그</p>
</article>
</body>
</html>
:is() 가상 클래스는 여러 개의 셀렉터를 그룹화하여 하나의 셀렉터처럼 사용할 수 있습니다. 즉, 하나의 요소에 대해 여러 셀렉터를 동시에 적용할 수 있습니다.
주요 특징:
- 여러 개의 셀렉터를 콤마(,)로 구분하여 그룹화합니다.
- 그룹화된 셀렉터들 중 하나라도 일치하면 스타일이 적용됩니다.
- 특정성 문제를 해결하고, 코드를 간결하게 만드는 데 유용합니다.
:where() 가상 클래스는 그룹 내의 셀렉터들에 대해 일괄적으로 스타일을 적용하며, 특정성을 낮추어 다른 셀렉터보다 우선 순위가 낮게 만듭니다.
주요 특징:
- 그룹 내의 셀렉터들에 동일한 스타일을 적용합니다.
- 특정성이 낮아 다른 셀렉터들에 비해 우선 순위가 낮습니다.
- 특정성 문제를 해결하거나, 더 우선시되는 다른 셀렉터들과 겹치는 스타일을 적용하는 데 유용합니다.
요약
- :is()는 여러 개의 셀렉터를 그룹화하여 하나의 셀렉터처럼 사용하고, 그룹 내에서 일치하는 셀렉터에 스타일을 적용합니다.
- :where()는 그룹 내의 모든 셀렉터에 대해 동일한 스타일을 적용하며, 특정성을 낮추어 다른 셀렉터들보다 우선 순위를 낮춥니다.
이들 가상 클래스는 복잡한 CSS 셀렉터를 더 간결하게 작성하고, 스타일링의 유연성을 높이는 데 도움이 됩니다.
728x90
