<aside> <img src="/icons/cursor-click_brown.svg" alt="/icons/cursor-click_brown.svg" width="40px" /> 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

</aside>

🌿 선택자

가상 클래스 선택자

지난 시간에 배웠던 first-child라는 가상 클래스 선택자를 기억하시나요? 형제 요소 중 첫번째 요소를 선택하는 가상 클래스 입니다.

<div class="container">
	<h1>이렇게</h1>
	<p>자식이 있다면?</p>
</div>

.container h1:first-child{
	background :red
}

위와 같은 html 구조에서 .container h1:first-child 가 선택하는 요소는 h1 입니다.

first-child는 대상의 모든 형제 요소 중 첫 번째에 있는 요소를 취급합니다.

이 경우, .container 의 모든 자식 요소중에서 h1이 첫 번째 요소이기 때문에 first-child에는 h1만 올 수 있고 다른 요소는 올 수 없습니다.

:first-child 와 비슷해 보이지만 약간 다른 선택자 입니다. 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 취급냅니다.

즉, first-child는 모든 형제 요소중 첫 요소라면 first-of-type은 지정해서 선택한 것과 일치하는 형제 요소 중 첫 요소입니다.

<div class="container">
	<h1>이렇게</h1>
	<p>자식이 있다면?</p>
	<p>이번엔</p>
	<h2>다른걸</h2>
	<p>해볼거야</p>
</div>

.container p:first-of-type{
	background :red
}