nth-of-type과 nth-child 속성은 여러개의 동일한 태그에 대해서 특정한 순서의 태그에 스타일을 적용하고 싶을 때 사용한다.
이때 두가지 속성의 공통점은, 속성 앞에 오는 요소를 갖고 있는 부모 태그 내에서 해당되는 요소를 선택한다는 점이다.
nth-of-type
selector:nth-of-type(n)은 부모태그 내에 있는 selector요소들 중 n번째 요소를 선택한다. 이때 n번째는 찾고자하는 요소들 내에서 계산된다.
아래와 같이 중간에 span태그가 있더라도 div태그 중에서 첫번째와 두번째 요소를 선택해 스타일을 적용한다.
nth-child
selector:nth-child(n)은 부모태그 내에 있는 selector요소들 중 n번째에 selector요소가 있다면 이 요소를 선택한다.
아래와 같이 div:nth-child(2)의 경우 div태그 중 두번째를 찾는 것이 아니라, div태그가 속한 부모 요소에 속한 모든 태그들 중 두번째에 div태그가 있을 경우 이 태그에 스타일을 적용하는 것이다.
부모요소에 span태그가 하나 있지만 span:nth-child(2)에 적용한 스타일이 적용되는 것을 확인할 수 있다.
nth-of-type,nth-child로 클래스를 선택한다면?
앞선 코드들은 태그이름을 사용해 n번째 요소를 선택했다. 하지만 만약 클래스를 사용해 n번째 요소를 선택한다면 해당 클래스를 가진 요소 중 n번째 요소를 선택할 수 있을까?
아래 결과를 보면 알다시피 그렇지 않다. 그 이유는 "target"이라는 클래스를 통해 요소를 선택했지만 형제들 중 몇번째인지 계산할 요소를 정하는 기준은 태그이기 때문이다.
.target클래스 명을 가진 요소를 선택했지만 이 요소는 div 태그이기 때문에 선택된 요소와 형제관계인 div태그들 중 2번째가 선택되어 2번째 div에 스타일이 적용된 것이다.
하지만 만약 nth-of-type(1)을 하면 첫번째 div요소에 클래스가 적용되지 않았기 때문에 스타일이 적용되지 않는다.
아래 결과를 보면 nth-of-type과 nth-child 모두에 적용되는 규칙임을 알 수 있다.
nth-of-type,nth-child의 매개변수값
nth-of-type(n),nth-child(n)과 같은 형태로 n번째 요소를 지정할 수 있는데, 여기에 넣을 수 있는 값은 다음과 같다.
1.양의 정수
앞선 예제와 같이 양의 정수 값을 통해 n번째 요소를 선택할 수 있다.
2.odd,even 키워드
홀수와 짝수 단위로 선택할 수 있는 키워드이다. odd를 입력하면 홀수가 적용되고 even을 입력하면 짝수가 적용된다.
3.An+B
만약 3의 배수를 적용하고 싶다면 3n을 입력하고, 5의 배수-1번째 요소를 선택하고 싶다면 5n-1과 같이 입력한다.
