CSS 선택자 모음1 ( 내 위주)

학원 선생님께서 CSS 선택자 공부할 때 도움이 될거라며 수업시간에 알려주신 게임(?) 사이트.
총 32단계로 되어 있는 나름 알찬 구성의 선택자 게임이다.

CSS Diner

처음엔 반신반의했지만, 정말 CSS 선택자 공부에 많은 도움이 되고 있기에
오늘 포스팅은 이 게임을 하면서 반복적으로 헷갈렸던 부분 위주로 정리해봤다.

A B
A 내부의 모든 B를 선택

A > B
A의 직계자식인 B를 선택 

A *
A 내부의 모든 요소를 선택

A + B
A 바로 뒤에 오는 B 요소를 선택
서로 뒤따르는 요소를 형제라고 한다.
!!! div + a 는 div 바로 다음에 오는 모든 요소를 선택한다. !!!

A ~ B
A ~ B는 A 다음에 오는 모든 B를 선택
이것은 A + B와 비슷하지만 A 다음에 오는 B요소를 하나가 아닌 모두 가져온다는 차이점이 있다.
뒤에 오는 B 요소의 모든 형제를 선택할 수 있다. 

A:first-child
A형제 중에 첫째? <- 이건 좀 헷갈리는 부분....  

:only-child
A B:only-child A에 있는 유일한 B요소를 선택

:last-child
요소 내부의 마지막 자식 요소를 선택
A B:last-child 는 A 내부의  마지막 B요소를 선택한다.
Tip. 요소가 하나뿐인 경우 해당 요소는 첫번째 자식, 유일한 자식 및 마지막 자식으로 계산된다

:nth-last-child() 
부모의 맨 아래에서 n번째 자식 (뒤로 세기)
:nth-last-child(2) 는 마지막에서 두번째 자식 요소를 모두 선택한다.
A:nth-last-child(3) 은 마지막에서 세번째이면서 A인 요소를 선택하는 것

:first-of-type
해당 유형의 첫번째 요소
A:first-of-type 는 A 중에서 첫번째 범위를 선택하는 것

B:only-of-type
유일한 B를 선택
A B:only-of-type 는 A의 요소 안에 유일하게 있는 B를 선택한다.

:last-of-type
특정 유형의 마지막 요소를 선택
다른 요소 내에서 해당 유형의 각 마지막 요소를 선택한다.
A:last-of-type 은 모든 요소의 마지막 A를 선택한다.

:not(X)
"X"와 일치하지 않는 모든 요소를 선택
:not(#fancy) 는 id=fancy가 없는 모든 요소를 선택한다.
A:not(:first-child) 는 첫번째 자식이 아닌 모든 A를 선택한다.
:not(.big, .medium) 은 class="big" 또는 class="medium"이 없는 모든 요소를 선택한다.

포스팅으로 정리해보니 참 많이도 헷갈리는구나...