CSS 탐구생활 : :first-child 와 :last-child 그리고 :nth-child( )

 

1.  :first-child, :last-child, :nth-child( )

-- first-child : 같은 부모요소로 감싸져 있고 자식태그들 중 형제요소 중 가장 첫번째를 의미한다.

-- last-child : 같은 부모요소로 감싸져 있고 자식태그들 중 형제요소 중 가장 마지막을 의미한다.

-- nth-child :  같은 부모요소로 감싸져 있고 자식태그들 중 형제요소 중 n번째를 의미한다.

 

 

2. first-child, last-child, nth-child 사용하기

 

See the Pen Untitled by proccm (@proccm) on CodePen.

 

위의 예제에서 li가 형제요소이기 때문에 li에 각각 :first-child , :last-child, :nth-child( )를 써서 스타일을 바꿔주었다. nth-child는 괄호 안에 몇 번째인지 숫자를 적어준다.

 

부모요소에 어떠한 스타일을 주고 특정한 형제요소의 스타일만 바꾸고 싶을 때 유용하게 쓸 수 있다.