[selector] CSS - :is() 가상선택자 - 여러 선택자 동시 선택 (= is선택자 = 이즈선택자)

1. :is() 예제 - 여러 선택자 동시 선택
2. :is() 정의
3. :is() 구문
4. :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>

 

결과보기