클래스 이름으로 특정 요소 타겟팅: CSS n번째 하위 접근 방식

과제: 클래스 이름이 같은 요소를 선택적으로 스타일 지정 위치는 마크업에서의 위치에 관계없이 적용됩니다.

해결책: 활용 nth-child() 또는 nth-of-type() 의사 선택기는 상위 요소 내의 순서 위치에 따라 요소를 대상으로 지정합니다.

nth-child() 의사 선택기

nth-child(n) 의사 선택기를 사용하면 상위 요소의 n번째 하위 요소에 스타일을 지정할 수 있습니다. 예를 들어, "myclass" 클래스를 사용하여 첫 번째 요소를 타겟팅하려면:

.parent_class:nth-child(1) {
  color: #000;
}

두 번째 및 세 번째 요소를 대상으로 지정하려면 다음 선택기를 사용합니다.

.parent_class:nth-child(2) {
  color: #FFF;
}

.parent_class:nth-child(3) {
  color: #006;
}

nth-of-type() 의사 선택기

nth-of-type(n) 의사 선택기는 nth-child()와 유사하게 작동하지만 다음을 기반으로 요소를 선택합니다. 부모 내의 유형. 이는 상위 요소 내에 동일한 유형의 요소가 여러 개 있을 때 유용합니다.

.myclass:nth-of-type(1) {
  color: #000;
}

.myclass:nth-of-type(2) {
  color: #FFF;
}

.myclass:nth-of-type(3) {
  color: #006;
}

HTML 예:

  
my text1
  

  
my text2
  

  
my text3