가상 클래스 first-of-type

가상 클래스 first-of-type는 부모의 지정된 유형의 첫 번째 자손이 되는 요소를 선택합니다. 즉, h2:first-of-type 라고 쓰면 부모 내에서 첫 번째 h2를 찾습니다 (부모 안에서 가장 첫 번째에 위치한 요소만 찾는 first-child와 다릅니다).

문법

css셀렉터:first-of-type {
  
}

예시

부모 안에서 첫 번째 단락을 찾아봅시다:

html<div>
  <h2>제목</h2>
  <p>단락</p>
  
  <h2>제목</h2>
  <p>단락</p>
  
  <h2>제목</h2>
  <p>단락</p>
</div>

cssp:first-of-type {
  color: red;
}

Результат: