[css3] 선택자

1.전체 선택자: 모든 HTML 태그를 말한다.

* { border-color: red; }

2.태그 선택자: 개별 HTML 태그를 말한다.

h1, div, p { border-color: red; }

3.아이디 선택자: 태그의 속성중 id의 값을 말한다.

#wrap { border-color: red; }

4.클래스 선택자: 태그의 속성중 class의 값을 말한다.

.wrap { border-color: red; }

5.자손 선택자, 후손 선택자: 하위 레벨을 말한다.

-.자손 선택자: 바로 다음 레벨을 말한다.

h1 > h2 { border-color: red; }

-.후손 선택자: 다음레벨 과 하위 레벨의 전체를 말한다.

h1   h2 { border-color: red; }

6.속성선택자: 태그의 속성을 말한다.

-.기본속성 선택자: 해당 속성을 가지고 있거나, 속성의 값이 같은 것을 말한다.

input[type] { border-color: red; }

input[type=text] { border-color: red; }

-.문자열 속성선택자: 속성의 값의 문자열이 전체가 같거나 문자열 일부가 포함된 것을 말한다.

input[type$=jpg] { border-color: red; }

7.동위선택자: 형제 레벨상에서 뒤에 위치하는 것을 말한다.

-.h1 바로 뒤에 위치한 첫번째 h2만을 대상으로 할때

h1 + h2 { border-color: red; }

-.h1 뒤에 위치한 모든 형제 레벨의 h2를 대상으로 할때

h1 ~ h2 { border-color: red; }

8.반응선택자: 태그에 특정한 반응이 발생하는 것을 말한다.

-.태그 클릭이 발생할 경우

h1:active

-.태그위에 마우스가 올라 올때

h1:hover

9.상태선택자: 태그에 특정 상태가 발생하는 것을 말한다.

-.체크가 선택되었을 경우

h1:checked

-.태그에 포커스를 받았을 경우

h1:focus

-.태그가 사용가능한 상태가 되었을 경우

h1:enabled

-.태그가 사용 불가능한 상태가 되었을 경우

h1:disabled

10.구조선택자: 자손 선택자(h1 > h2)와 병행해서 많이 사용한다.

-.일반구조 선택자: 형제 레벨에서 특정한 위치에 있는 태그를 말한다.

:first-child

:last-child

:nth-child(2n)

:nth-last-child(2n)

-.형태구조 선택자: 특정한 위치에 있는 특정 타입(type) 태그를 말한다.
:first-of-type : 형제중 첫번째

:last-of-type  : 형제중 마지막 번째

:nth-of-type   : 형제중 앞에서 부터 수열번째

:nth-last-of-type: 형제중 마지막부터 수열 번째

12.문자 선택자: 태그내의 특정 조건의 문자 선택

-.시작문자 선택자

::first-letter

::first-line

-.전후문자 선택자: 전후문자 선택자는 content 속성의 문자를 선택자 앞뒤에 입력할 수 있다.

(다른 선택자는 content를 사용 못한다.)

::after

::before

13.반응문자 선택자

::selection 사용자가 드래그한 문자와 반응해서 생기는 영역을 선택

14.링크 선택자: href속성을 가지고 있는 a태그에 적용되는 선택자(한번 이상 다녀온 링크를 선택할 수 있는 선택자)

a:link

a:visited

15.부정선택자: 선택자를 반대로 적용할수 있는 선택자

input:not([type=password])

input:not(h1)