[CSS] nth 선택자 이해

nth-Child

li:nth-child(n)

➡️ li의 모든 요소 중 n번째 요소

➡️ n자리에 배수 및 수식 넣기 가능. ex) 2n, 2n+1, 2n-1, odd, even

<dl>
	<dt></dt> // dt:nth-child(1)
	<dd></dd> // dd:nth-child(2)
	<dd></dd> // dd:nth-child(3)
	<dt></dt> // dt:nth-child(4)
	<dd></dd> // dd:nth-child(5)
	<dd></dd> // dd:nth-child(6)
</dl>

// 여기서 dt:nth-child(4) 을 적용할 때, dl을 기준으로 dt가 4번째 줄일 때 적용이 된다.
// 만약 dt:nth-child(3)일 땐,  세 번째 줄에는 dd가 위치하므로 문법이 맞지 않아 표시되지 않음

li:first-child

➡️ li 요소 중 첫 번째 요소

li:nth-last-child(n)

➡️ li의 모든 요소 중 마지막으로부터 n번째 요소

• nth-child는 무조건 부모 기준 줄 순서대로 선택을 해야 한다.
• 해당 줄에 있는 요소명과 지정한 요소명이 다르면 오류, 아예 표시 안됨
• 헷갈릴 것 같으면 class를 다 동일하게 지정해놓고 class 명으로 사용하는게 편함

---

nth-of-type

➡️ nth-child의 단점을 보완하기 위한 속성.

➡️ 입력한 요소 중에서 순서가 지정되어 그 중에서 선택 가능.

➡️ first-of-type 과 last-of-type을 사용해 입력한 요소의 맨 첫번째와 마지막 요소 선택 가능.

<dl>
	<dt></dt> // dt:nth-of-type(1)
	<dd></dd> // dd:nth-of-type(1)
	<dd></dd> // dd:nth-of-type(2)
	<dt></dt> // dt:nth-of-type(2)
	<dd></dd> // dd:nth-of-type(3)
	<dd></dd> // dd:nth-of-type(4)
</dl>

// dt:nth-of-type(2) ⇒ dt 중에서 두번째 요소 선택