CSS 선택자 종류

전체 선택자

* { color:red; }

//모든 글자의 색상이 빨강색으로 변경된다.

 

 

태그선택자

h1 { color:red; }

p { color:orange; }

//h1 태그의 글자는 빨강색 p태그의 글자는 오렌지색으로 변경된다,

 

 

아이디 선택자

#tables { background : red; }

//id속성이 tables인 태그의 배경색이 빨강으로 변경된다.

 

 

클래스 선택자

.tables { background:red; }

//class속성이 tables인 태그의 배경색이 빨강으로 변경된다.

 

 

속성선택자

input[type=text] { background:red; }

//input 태그 중에서 type속성을 text로 갖는 태그의 배경색을 빨강으로 변경합니다.

 

 

자손선택자(자손이란 요소의 바로 아래에 존재하는 요소만을 가리킨다.)

table > th { backgournd:red; }

#header > tr { backgournd:red; }

//table요소의 자손인 th요소의 배경색을 빨강으로 변경합니다.

//id속성이 header인 요소안의 tr요소의 배경색을 빨강으로 변경합니다.

 

 

후손선택자(후손이란 요소안에 위치한 전체요소가 대상이 된다.)

#section > .title { color:red; }

//id속성이 section인 요소의 후손중에 class속성이 title인 요소에 빨강을 적용합니다.

 

 

동위선택자(동위 선상에 위치한 요소를 대상으로한다. )

h1 + h2 { color:red; }

//h1태그 바로뒤에 위치하는 h2태그 하나만의 글자색을 빨강색으로 변경합니다.

h1 ~ h2 { color:red; }

//h1태그와 동위선상의 모든 h2태그에 글자색 빨강을 적용한다.

 

 

반응선택자

tr:active //tr태그에 마우스를 클릭한경우 적용합니다.

td:hover //td태그에 마우스를 올려놓았을 경우 적용합니다.