css에서 first-of-type 과 first-child 의 차이
3월 21, 2023
In 기타 |
css 문법중 first-of-type 과 first-child 에 대한 내용을 정리합니다.
first-of-type: 속성이 처음으로 나올때 css를 적용합니다.first-child: 속성이 첫번째 자식인 경우 css를 적용합니다.
라고 설명할 수 있겠지만 말로는 쉽게 이해되지 않습니다. ^^
아래 예를 보시면 차이점을 쉽게 이해할 수 있을 것 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
div p:first-of-type { /* div에 p가 처음으로 나올때 배경색을 변경 */
background: #00ff00;
}
div p:first-child { /* div의 첫번째 자식이 p인 요소에 배경색을 변경 */
background: #ff0000;
}
</style>
</head>
<body>
<div>
<h1>h1태그1번</h1>
<p>p태그1번 first-of-type</p>
<p>p태그2번</p>
</div>
<div>
<p>p태그1번 first-child</p>
<p>p태그2번</p>
</div>
</body>
</html>