● :first-of-type과 :last-of-type
:first-of-type 선택자는 부모의 자식 중에서 첫 번째로 등장하는 E 요소를 선택하고, :last-of-type 선택자는 부모의 자식 중에서 마지막에 나오는 E 요소를 선택합니다.
다음과 같이 작성하면 부모의 자식 요소 중 첫 번째로 등장하는 p 태그를 선택합니다.
05/04/fisrt-of-type.html
<style>
p:first-of-type{
color:red;
}
</style>
(중략)
<body>
<span>span 0</span>
<p>lorem 0</p> /* 부모인 body 태그의 자식 중 첫 번째 p 태그에 스타일 적용 */
<div>
<span>span 1</span>
<p>lorem 1</p> /* 부모인 div 태그의 자식 중 첫 번째 p 태그에 스타일 적용 */
<p>lorem 2</p>
</div>
<span>span 2</span>
<span>span 3</span>
<p>lorem 3</p>
<p>lorem 4</p>
</body>