10. css selector

n번째 자식요소를 선택(nth-child)

<div id="jisu">
  <div>
    <span> span tag </span>
  </div>
  <span> span tag 2 </span>
</div>

 

<div id="jisu">
  <h2>단락 선택</h2>
  <p>첫번째 단락입니다</p>
  <p>두번째 단락입니다</p>
  <p>세번째 단락입니다</p>
  <p>네번째 단락입니다</p>
</div>

여기서 #jisu>p:nth-child(2){color:red} 라고 한다.

 

그렇다면 무엇이 빨간색으로 변할까?

인덱스는 1부터 시작한다.

 

정답은 첫번째 단락입니다가 빨간색으로 변한다. 

즉 nth-child는 모든 요소 포함해서 자식을 센다.

특정 type의 자식만 세고 싶으면, nth-type-of를 사용하면 된다..