CSS 기본 1(Selector:선택자)

<선택자 정리>

*선택자 게임

링크: http://flukeout.github.io/

1) 전체 선택: *

2) ID로 선택: #ID

3) A 안의 B 선택: A B

4) ID 안의 B 선택: #ID B

5) Class로 선택: .Class명

6) A와 B 동시 선택: A, B

7) A 뒤에 오는 하나의 B 선택: A + B

8) A 뒤에 오는 모든 B 선택: A ~ B

9) A의 자손(direct children) 선택: A>B

10) A의 첫번째 자손 선택: A:first-child

11) 첫번째로 나타난 A: A:first-of-type

12) n번째 A만 선택: A:nth-of-type(n)

13) 짝수 번째 A만 선택: A:nth-of-type(even)

14) 자손 없는 것 선택: A:empty

15) 자손 있는 것 선택: A:not(empty)

16) name 속성 가지는 모든 것: [name]

17) name이 kim인 것: [name="kim"]

18) name이 k로 시작하는 것: [name^="k"]

19) name이 k로 끝나는 것: [name$="k"]

20) name에 k를 포함하는 것: [name*="k"]

<반응 선택자>

1) 마우스로 클릭한 태그 => :active

2) 마우스 커서를 올린 태그 => :hover

3) href 속성 가진 a 태그 => :link

4) 방문한 링크 가진 a 태그 => :visited

<input 상태 선택자>

1) 체크 상태의 input 태그 => :checked

2) 초점 맞추어진 input 태그 => :focus

3) 사용 불가능한 input 태그 => :disabled (<-> enabled)