selector 표기법

a > b

a=parent 모든 b=child 적용.

a + b

a 바로 밑에 있는 b(하위요소)만 적용.

a ~ b

a 이후 존재하는 모든 b에 적용.

---

.a .b .c { }

공백은 a의 하위 > b의 하위인 c에만 적용.

.a .b.c { }

공백없음은 a의 하위 > b의 또다른 클래스명(c)에만 적용.

.a, .b, .c { }

쉼표(,)는 각 선택자의 css 공통 적용.

---

::before / ::after

위 2가지는 가상요소.
::before는 해당태그의 이전 공간.
::after는 해당태그의 이후 공간.
ex) .해당태그::before -> 공백없이 붙여씀.


css2는 :before,:after로 :가 한번만 붙었지만,
css3는 가상클래스 차이를 위해 ::before,::after로 사용.

---

child

#:first-child : 자식요소 중 첫 번째 자식만 적용.
#:last-child : 자식요소 중 마지막 자식만 적용
#:nth-child(n) : ()안의 n의 수식 순서 적용 (n은 0부터)
(ex. n+2면은 홀수 순서 적용)
#:nth-last-child(n) : 자식 순서의 역순으로 nth-child를 적용.