css 선택자

전체 선택자 : * : *

태그 선택자 : 태그 : h1

아이디 선택자 : #아이디 : #header

클래스 선택자 : .클래스 : .item

후손 선택자 : 선택자 선택자 : header h1

자손 선택자 : 선택자 > 선택자 : header > h1

반응 선택자 : 선택자:active : div:active

선택자:hover : div:hover

상태 선택자 : :checked : input:checked

:focus : input:focus

:enabled : input:enabled

:disabled : input:disabled

링크 선택자 : :link : a:link

:visited : a:visited

...........................................................................................................................

1. * 전체 선택자

* {color : red; }

전체 선택자는 모든 웹 페이지에서 body 내부 뿐만 아니라, html 태그를 포함하여 head, title, style 까지 선택한다.

2. 태그 선택자

html 페이지 내부에서 특정한 종류의 태그를 모두 선택할 때 사용

h1{ color:red;}

p{ color:blue}

h1 태그에 빨강이, p 태그에는 파랑이 적용된다.

* 여러개의 선택자 적용

body, p, h1 {margin:0 }

콤마(,) 로 구분한다.

3. 아이디 선택자 #

#wrap{ width:800px; overflow:hidden;}

4. 클래스 선택자 .

.select{color:red;}

* 여러개의 클래스 선택자 사용

.item {color :red;}

.header{background-color:blue;}

<h1 class="item header" > h1 </hr>

-> 이렇게 하면 item과 header 의 속성이 동시에 적용된다.

* 태그 선택자와 클래스 선택자

li .select{color:red;}

-> li 태그 중 class 속성으로 select를 가지는 태그의 색 속성을 빨강으로 적용한다,

5. 후손 선택자, 자손 선택자

<div>

 <h1>Css3</h1>

 <h2>sub Title </h2>

 <ul>

  <li>1</li>

  <li>2</li>

 </ul>

</div>

-> div 태그를 기준으로 바로 한 단계 아래에 위치한 태그( h1, h2, ul)을 자손이라 부르고, div 태그 아래에 위치한 모든 태그(h1,h2,ul,li)를 후손이라 부른다.

5-1. 후손 선택자

#header h1{color:red;}

-> id 속성으로 header를 가지는 태그의 후손 위치에 있는 h1 태그의 색 속성을 빨강으로...

* 후손 선택자 여러개

#header h1, #header h2{ color:blue;}

5-2. 자손 선택자

#header > h1{ color:yellow;}

->id 속성으로 header를 가지는 태그의 자손 위치에 있는 h1 태그의 색 속성을 노랑으로 ....

* table의 경우, 화면 로드시 tbody 태그가 자동으로 추가되므로 귀찮으니 사용하지 말자.

6. 반응 선택자

hover : 마우스를 태그 위에 올리면

active : 클릭했을 때

h1:hover{color:red;}

h1:active{color:black;}

7. 상태 선택자

:checked : 체크 상태의 input 태그를 선택

:focus : 초점이 맞춰진 input 태그를 선택

:enabled : 사용 가능한 input 태그를 선택

:disabled : 사용 불가능한 input 태그를 선택

input:enabled{ color : red;}

-> input 태그가 사용가능할 경우 색을 빨강으로

8. 링크 선택자

:link : href 속성을 가지고 있는 a 태그를 선택

:visited : 방문했던 링크를 가지고 있는 a 태그