개인적으로 헷갈리는 <선택자>를 모아보자.

:nth-of-type(odd)
:nth-of-type(even)

odd는 홀수번째 요소를 선택한다.

even은 짝수번째 요소를 선택한다.

 

p:nth-of-type(1)
p:nth-of-type(2n+1)

p요소 중에 첫번째 요소를 선택한다.

부모 안의 p 요소 중 첫번째부터 2번째마다 선택한다.

 

<div><p>내용</p></div>
p:only-child
p:only-of-type

div요소의 자식인 p요소가 하나밖에 없을 때.

p요소와 같은 유형의 형제가 없을 때.

 

p:last-child
p:last-of-child

부모 안에 모든 요소 중 제일 마지막 요소인 p를 선택한다.

부모 안에 모든 p요소 중 마지막 p요소를 선택한다.

 

:empty

자식이 전혀 없는 요소에 적용하는 선택자.

요소 안에 주석이 있어도 상관이 없다.

공백이 있으면 적용이 안 된다.

 

[p^=class]
[p$=class]
[p*=class]

.class로 시작하는 p요소를 전부 선택한다.

.class로 끝나는 p요소를 전부 선택한다.

.class를 가진 p요소를 전부 선택한다.

 

 

 

참고: 유튜브 드림코딩엘리