선택자_가상클래스(2)

:first-child

:first-child :  선택자가  형제 요소 중 첫째라면 선택 

 

코드펜 예시

 

See the Pen 선택자_가상클래스4 by 김선미 (@tjsalsun) on CodePen.

 

:last-child

 

:last-child : 선택자가 형제 요소 중 막내라면 선택  

 

코드펜 예시

 

See the Pen 선택자_가상클래스5 by 김선미 (@tjsalsun) on CodePen.

 

:nth-child(n)

 

:nth-child(n) : 선택자가 형제 요소중 (n)째라면 선택 

• n은 0 부터 시작(Zero-Based Numbering)

     - 2n 이런 식으로 넣을 경우 2의 배수 번째만(2처럼 다른 숫자도 올 수 있다)

     - 2n+1 홀수 번째만 

     - n+2 1번째 자식 제외 하고 나머지 선택 

 

코드펜 예시 

 

See the Pen 선택자_가상클래스6 by 김선미 (@tjsalsun) on CodePen.

 

 :not()

 

:not(selector): 선택자가 아니니 요소 선택 

 

코드펜 예시 

 

See the Pen 선택자 _가상클래스6 by 김선미 (@tjsalsun) on CodePen.

 

TIL

keypoint

nth_child 같은 경우 홀수 번째(2n+1) 또는 짝수 번째(2n) 자식 선택 가능 하며 

첫번째 제외하고 선택시에는 n+2로 한다 

 

느낀 점

nth-child 같은 경우 

일일이 선택 필요없이 유용하게 쓰일거 같다 

 

오늘의 학습 만족도 

⭐⭐⭐⭐⭐