[생활코딩][CSS] 다양한 선택자들 CSS 선택자

게임으로 선택자 공부 : http://flukeout.github.io/

.class {} class 속성

#id {} id 속성

* {} 모든 속성

A, B {} A,B의 속성

A + B {} A옆에 인접한 B가 선택이된다! (옆 하나만됨)

A ~ B {} A옆에 인접한 B가 선택이된다! (옆 마지막까지 선택)

child selector : element의 직계 child만

A > B {} 모든 A 안의 A바로 밑에있는 B만 선택한다.

First ChildA :first-child B {} 모든 A 밑에 있는 첫번째 child B만

Only child pseudo-selector(level 16 of 26)

* :only-child B {} 단독으로 차일드 있는 B만 (차일

드 두개이면 선택 안됨)

last child pseudo-selector(level 17 of 26)

.table>*:last-child {} table 제일 끝에있는 child값만

Nth child selector(level 18 of 26)

A:nth-child(3) {} A 의 3번 째 차일드

Nth Last child selector(level 19 of 26)

:nth-last-child(4) {} 역순으로 4번째 차일드 

First of Type selector(level 20 of 26)

A:first-of-type {}  A가 제일 처음 나오는 타입!

Nth of Type Selector(level 21 of 26)

A:nth-of-type(even) {} A중에서 짝수 번째 타입만 add = 홀 수

Nth of Type Selector with Formula(level 22 of 26)

A:nth-of-type(Bn+C) {} n은 변수가 들어가는데 컴퓨터가 넣어줌 (0, 1, 2, ...)

Only of Type Selector (level 23 of 26)

A:only-of-type {} A타입 중에 자신과 타입이 같은 없이 없는 element를 선택 (자기 자신과 같은 타입 시빌링이 존재 하지 않는것 형제나 자매가 없는 경우)

Last of Type Selector (level 24 of 26)

A:last-of-type {} A타입을 가지고 있는 것중 마지막 타입

empty Selector (level 25 of 26)

A:empty {} A 타입으로 안에 다른것이 아무것도 가지고 있지않는것!

Native Pseudo-class  (level 26 of 26)

:not(#id) {} id를 가지지 않는 모든 엘리멘트 

:not(:first-child) {}  first-child를 제외한 나머지