[selector] CSS - .class1.class2 클래스선택자 ★★★ - 두 클래스가 (모두/함게/둘다/동시) 정의된 요소

1. .class1.class2 예제 - 두 클래스가 모두 정의된 요소 선택
2. .class1.class2 정의
3. .class1.class2 구문
4. .class1.class2 예제 - 지정 클래스가 모두 정의된 요소 선택

.class1.class2 예제 - 두 클래스가 모두 정의된 요소 선택

 

<style>

.hz.ss {background:tomato;}

.hz {background: yellow;}

.ss {background:blue;}

</style>

<h1>홈짱닷컴</h1>

<div class="hz ss">

  <p>Homzzang.com</p>

  <p>홈페이지 제작관리</p>

</div>

<p class="hz">웹코딩 공부하러 오세요.</p>

<p class="ss">HTML CSS JS JQ BS JS JQ</p>

 

결과보기

※ .hz 클래스보다 .hz.ss클래스가 먼저 선언되어도 선택자 명시도에 의해서 같은 결과 나옴.

.class1.class2 정의

 

요소에 지정 클래스가 모두 정의된 요소를 선택.

 

---

 

1. cf.

.class1 .class2 선택자 - 두 클래스가 분리된 경우엔 자손관계임.

 

2.

모든 브라우저 지원.

 

.class1.class2 구문

 

<style>
.class1.class2 { ... }
</style>

 

<element class="class1 class2">...</element>

 

.class1.class2 예제 - 지정 클래스가 모두 정의된 요소 선택

<style>

.a {color:red;}

.a.b {color:blue;}

.a.b.c {color:green;}
</style>

 

<div class="a">a : red</div>

<div class="a b">ab : blue</div>

<div class="a b c">abc : green</div>

 

결과보기