[CSS] 가상 선택자 정리 및 비교 nth-child, nth-of-type

css3

CSS에서 n번째 자식 선택기는 부모 요소 내 위치를 기준으로 요소를 선택하는 데 사용됩니다. 

CSS에는 여러 가지 유형의 n번째 선택기를 사용할 수 있으며, 각 선택기에는 고유한 사용 사례가 있습니다.

 

다음은 nth-selector를 사용한 간단한 예제 코드입니다.

HTML

<div class="parent">
  <p>첫 번째 자식 요소</p>
  <p>두 번째 자식 요소</p>
  <span>세 번째 자식 요소</span>
  <p>네 번째 자식 요소</p>
  <span>다섯 번째 자식 요소</span>
  <p>여섯 번째 자식 요소</p>
</div>

css

/* 첫 번째 자식 요소 스타일 변경 */
.parent:nth-child(1) {
  background-color: #f5f5f5;
}
/* 홀수번째 자식 요소 스타일 변경 */
.parent:nth-child(odd) {
font-weight: bold;
}

/* 짝수번째 자식 요소 스타일 변경 */
.parent:nth-child(even) {
font-style: italic;
}

/* 세 번째 자식 요소 스타일 변경 */
.parent span:nth-child(3) {
color: blue;
}

/* 같은 타입의 요소 중 세 번째 요소 스타일 변경 */
.parent p:nth-of-type(3) {
text-decoration: underline;
}

/* 뒤에서 두 번째 자식 요소 스타일 변경 */
.parent:nth-last-child(2) {
border: 1px solid black;
}

1. nth-child
이 선택기는 첫 번째 자식부터 계산하여 부모 요소 내 위치를 기준으로 요소를 선택합니다. 예를 들어 nth-child(3)은 세 번째 자식 요소를 선택합니다.

2. nth-last-child
이 선택기는 nth-child와 유사하게 작동하지만 첫 번째 자식 대신 마지막 자식부터 계산합니다. 예를 들어 nth-last-child(2)는 두 번째에서 마지막 자식 요소를 선택합니다.

3. nth-of-type
이 선택기는 부모 요소 내 위치를 기준으로 요소를 선택하며, 같은 유형의 요소만 계산합니다. 예를 들어 nth-of-type(2)는 해당 유형의 두 번째 요소를 선택합니다.

 

반응형

4. nth-last-of-type
이 선택기는 nth-of-type과 유사하게 작동하지만 첫 번째 요소가 아닌 마지막 요소부터 계산합니다. 예를 들어 nth-last-of-type(3)은 해당 유형의 세 번째에서 마지막 요소를 선택합니다.

5. nth-child(odd/even)
이 선택기는 부모 요소 내 위치에 관계없이 홀수 또는 짝수 자식 요소를 모두 선택합니다. 예를 들어 nth-child(even)는 짝수인 모든 자식 요소를 선택합니다.

6. nth-of-type(odd/even)
이 선택기는 nth-child(odd/even)와 유사하게 작동하지만 같은 유형의 요소만 선택합니다. 예를 들어 nth-of-type(odd)는 해당 유형의 모든 홀수 요소를 선택합니다.

웹페이지 내에서 특정 요소를 효과적으로 선택하고 스타일을 지정하려면 이러한 다양한 유형의 n번째 선택기를 이해하는 것이 중요합니다. 이러한 선택기를 다른 CSS 선택기 및 속성과 함께 사용하면 복잡하고 시각적으로 매력적인 디자인을 만들 수 있습니다.