[CSS] 헷갈리는 가상클래스 child vs of-type

순서에 따른 가상 클래스에 대해서 공부해보자.

순서관련 가상 클래스에는

 

1. first-child

2. first-of-type

3. last-child

4. last-of-type

5. nth-child()

6. nth-of-type()

 

이렇게 6가지가 있다.

클래스 이름이 매우 비슷해서 용도의 헷갈림이 많다.

 

📌 child vs of-type

✅ child

: 형제 요소 중

형제 요소들 중에서만 

형제 요소가 아니면 해당되지 않는다.

✅ of-type

: 해당 요소(클래스) 중 자신의 유형과 일치하는 (형제요소 고려해야함)

p의 first-of-type이면 p태그 중 자신이 무조건 첫번째라면 다 해당된다.

 

📌 참고

- 시니어 개발자도 모르길래 만든 영상 - 수코딩