css에서 first-of-type 과 first-child 의 차이
3월 21, 2023
In 기타 |
css 문법중 first-of-type 과 first-child 에 대한 내용을 정리합니다. - first-of-type : 속성이 처음으로 나올때 css를 적용합니다. - first-child : 속성이 첫번째 자식인 경우 css를 적용합니다. 라고 설명할 수 있겠지만 말로는 쉽게 이해되지 않습니다. ^^ 아래 예를 보시면 차이점을 쉽게 이해할 수 있을 것 같습니다. ```html <!--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> </ul> </body> </html> ```