가상 클래스 선택자 中 nth-of-type

:nth-of-type

• 형제 요소 중 :앞에 작성한 태그가 n번째 요소라면 선택(n키워드 사용시 0부터 해석)

div:nth-of-type(2)

형제 요소 중 2번째 순서에 div가 있다면 선택

CSS

.fruits li:nth-of-type(1) {
  color: red;
}

HTML

<ui class="fruits">
  <span>오렌지</span>
  <p class="red">딸기</p>
  <li>망고</li>               <-------  /*선택*/
  <li class="red">사과</li>   
</ui>

주의할 점은 태그선택자만 사용 가능하고 클래스 선택자는 사용 불가