다중클래스 사용 및 선택자 선택방법

css 다중클래스

다중 class 사용 사용 방법 :

태그의 class attribute에 다중 클래스 입력 시 공백으로 표기하여 입력

표기 )​

<div class=”box blue number”>box</div>

 

다중클래스 선택방법​ ​:

css에서 다중클래스 사용 시 “ . “으로 연결하여 사용한다.

표기 )​

<style>
#boxgroup.box{ /*style*/ }
</style>
<div id=”boxgroup” class=”box blue number”>box</div>

​주의 : ​#boxgroup .box{} 자식요선택

 

요소(element)선택 방법:

1. tag ​:

태그명을 사용하여 선택할 수 있다.

표기 )

css

div{ /*속성기재*/ }

​html

 <div>test</div>

 

2. ID ​:

id명을 사용하여 선택할 수 있다.​( “#“으로 표기 )

표기 )​

css

#box{ /*속성기재*/ }

html

<div id=”box”>test</div>

 

3. class ​:

class명을 사용하여 선택할 수 있다.​(“ .” 으로 표기 )

표기 )​

css

.box{ /*속성기재*/ }

html

<div class=”box”>test</div>

 

4. “:”​ ( 가상선택자 ) :

“:” 또는 “::”​ 사용하여 선택할 수 있다.

표기 )

css

​.box:focus{ /*속성기재*/ }

 html​

<div class=”box”>test</div>

 

5. attribute​:

 태그 속성을 사용하여 선택할 수 있다.​.

표기 )​

css

input[type=text]{ /*속성기재*/ }

html

<input type=”text”/>

 

 

5. 동위 또는 자손 선택자 사용 :

 

 

1. “ >“ 자손 선택자 : “ > ”를 사용하여 요소 바로 아래 자식 요소를 선택할 수 있다.

표기 )

<div class=”box”><span>span</span></div>

css 표기 : .box > span{ /*속성기재*/ }

 

2. “ + “ 동위선택자(인접) 선택자 : “ + ”를 사용하여 요소 바로 뒤에 인접한 요소를 선택 할 수 있다. 표기 )

 <div class=”box”><span>span</span></div>
 <div class=”items”>items</div>

css 표기 : .box + .items{ /*속성기재*/ }

 

3. “ ~ “ 동위선택자 선택자 : “ ~ ”를 사용하여 요소 뒤에 오는 요소를 선택할 수 있다. 표기 )

<div class=”box”><span>span</span></div>
 <span>span</span>
 <div class=”items”>items</div>

css 표기 : .box ~ .items{ /*속성기재*/ }