프로필카테고리질문하기
로그인 계정 만들기

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

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

답글 (1)

05 개월 전

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)
더 많은 의견 보기

정보

업보트
0
질문됨
5 개월 전
최근 활동
5 개월 전

카테고리

CSS