CSS의 nth-child와 nth-of-type의 차이점 알아보기

루체도 2019. 8. 11. 15:51

nth-child(n)	nth-of-type(n)
모든 자식 엘리먼트 중 n번째	특정 유형의 자식 엘리먼트 중 n번째

위의 표를 보고 한번에 알기는 어려우니까 예제를 통해서 살펴보도록 하겠습니다.

<body>쪽 부분에 아래 코드를 작성을 해주세요

nth-child가 무엇인지 부터 알아보겠습니다.

css부분에 가서 밑의 사진과 같이 입력을 하시면 결과가 나오게 됩니다.

특정 태그에 상관없이 test 클래스를 부모로 두고 있는 자식 엘리먼트 중 3번째를 뜻합니다.

nth-of-type은 특정태그만 검사를 하기 때문에 똑같이 3을 넣어주면 지금 3번째가 없기 때문에

아무런 동작을 하지 않는걸 확인하실 수 있습니다.