전체 선택자 : * : *
태그 선택자 : 태그 : 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 태그
