CSS :first-child와 :first-of-type 차이점 - Codeclu
프로필카테고리질문하기
로그인 계정 만들기

CSS :first-child와 :first-of-type 차이점

01 년 전
:first-child 셀렉터와 :first-of-type 셀렉터의 차이점은 무엇인가요?
p:first-child { color: blue; } p:first-of-type { color: green; }
답변하기 의견 추가
의견 (0)
더 많은 의견 보기

답글 (1)

01 년 전

first-child 셀렉터는 첫 번째 자식을 선택해요.

first-of-type 셀렉터는 같은 타입 중 첫 번째인 경우 선택해요.


그러니까 예를 들어:

<div class="parent"> <h1>제목</h1> <!-- :first-child --> <p>첫 번째 문단</p> <!-- p:first-of-type --> <p>두 번째 문단</p> <p>세 번째 문단</p> <!-- :last-child --> </div>

여기에서 첫 번째 문단을 선택하고 싶은 경우 p:first-of-type 을 사용해야 해요.

(첫 번째 자식은 h1 이기 때문에 :first-child 는 사용할 수 없어요.)

p:first-of-type { color: green; }
의견 추가
의견 (0)
더 많은 의견 보기