목차
- :is() 예제 - 여러 선택자 동시 선택
- :is() 정의
- :is() 구문
- :is() 예제 - cf. :where() 선택자
:is() 예제 - 여러 선택자 동시 선택
<style>
:is(p.intro, ul, ol) {
color: red;
}
</style>
<h1>홈짱닷컴 Homzzang.com 소개</h1>
<p class="intro">코딩언어 공부 사이트</p>
<p>브라우저 언어</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>서버 언어</p>
<ol>
<li>PHP</li>
<li>SQL</li>
</ol>
<p>PS. 그누보드5 제작관리 시 필요.</p>
결과보기
:is() 정의
여러 선택자를 동시에 선택하는 선택자 임. 즉, 괄호 안에 쉼표(,)로 연결된 모든 요소에 대해 동일 스타일 적용 시 사용. (예) :is(p, div, .hz)
1. 아래 두 표현은 동일한 의미임.
- :is(section, article) :is(h1, h2, h3) { ... }
- section h1, section h2, section h3, article h1, article h2, article h3 { ... }
2. cf.
- :is() 선택자 - 선택자 리스트 중 가장 높은 명시도를 취함.
- :where() 선택자 - 명시도를 무조건 0으로 간주하고 계산.
3.
- CSS4
- IE 제외한 주요 최신 브라우저 모두 지원.
:is() 구문
동시에 선택할 선택자를 쉼표(,) 이용해 괄호 안에 나열.
:is(selector1, selector2, selector3, .... ) { CSS 선언 }
:is() 예제 - cf. :where() 선택자
- :is() 선택자 - 선택자 리스트 중 명시도 가장 높은 것 취함.
- :where() 선택자 - 무조건 명시도 0으로 간주.
<style>
p { color: red; }
p:is(.highlight) { color: blue; }
p:where(.highlight) { color: green; }
</style>
<p>홈짱닷컴 Homzzang.com</p>
<p class="highlight">그누보드 강의</p>
결과보기
