CSS의 다양한 응용 시나리오 구현:nth-last-of-type 의사 클래스 선택기

CSS의 다양한 응용 시나리오를 구현하려면 n번째 유형의 마지막 의사 클래스 선택기, 특정 코드 예제가 필요합니다.

CSS에서 선택기는 HTML 요소를 선택하고 해당 요소에 스타일을 적용하는 데 사용하는 것입니다. 요소 선택기, 클래스 선택기, ID 선택기와 같은 일반적인 기본 선택기 외에도 CSS는 특정 요소를 보다 정확하게 선택할 수 있는 의사 클래스 선택기도 제공합니다.

일반적으로 사용되는 의사 클래스 선택자 중 하나는 n번째 마지막 유형입니다. 그 기능은 마지막에서 지정된 유형의 n번째 형제 요소를 선택하는 것입니다. 이 기사에서는 :nth-last-of-type 의사 클래스 선택기의 다양한 애플리케이션 시나리오를 살펴보고 자세한 코드 예제를 제공합니다.

1. 마지막 요소 선택

먼저, 지정된 유형의 마지막 형제 요소를 선택하는 간단한 응용 시나리오를 살펴보겠습니다. HTML 목록이 있고 그 목록의 마지막 단락 요소를 선택하고 여기에 스타일을 적용하려고 한다고 가정해 보겠습니다. :nth-last-of-type(1) 선택기를 사용하여 다음을 수행할 수 있습니다.

p:nth-last-of-type(1) {
  color: red;
}

2. 끝에서 두 번째 요소 선택

마지막 요소를 선택하는 것 외에도 지정된 유형의 끝에서 두 번째 형제 요소를 선택할 수도 있습니다. . 5개의 단락 요소가 포함된 HTML 목록이 있고 끝에서 두 번째 단락 요소를 선택하고 여기에 스타일을 적용하려고 한다고 가정해 보겠습니다. :nth-last-of-type(2) 선택기를 사용하여 다음을 달성합니다.

p:nth-last-of-type(2) {
  font-weight: bold;
  color: blue;
}

3. 홀수 위치에서 요소 선택

:nth-last-of-type 선택기를 사용하여 다음에서 지정된 유형의 형제를 선택할 수도 있습니다. 홀수 위치 요소. 예를 들어, 6개의 단락 요소가 포함된 HTML 목록이 있고 이상한 위치에 있는 단락 요소를 선택하고 스타일을 적용하려고 합니다. :nth-last-of-type(홀수) 선택기를 사용하면 다음을 달성할 수 있습니다.

p:nth-last-of-type(odd) {
  background-color: yellow;
}

4. 짝수 위치에서 요소 선택

마찬가지로 :nth-last-of-type 선택기를 사용하여 짝수를 선택할 수도 있습니다. 위치 지정된 유형의 형제 요소입니다. 예를 들어, 6개의 단락 요소가 포함된 HTML 목록이 있고 짝수에 있는 단락 요소를 선택하고 여기에 스타일을 적용하려고 합니다. :n번째 마지막 유형(짝수) 선택기를 사용하면 다음을 달성할 수 있습니다.

p:nth-last-of-type(even) {
  background-color: pink;
}

5. 특정 요소 범위 선택

:n번째 마지막 유형 선택기는 다른 선택기와 조합하여 사용할 수도 있습니다. 지정된 유형의 특정 형제 요소 범위를 선택합니다. 예를 들어, 10개의 단락 요소가 포함된 HTML 목록이 있고 세 번째와 여섯 번째 단락 사이의 단락 요소만 선택하고 스타일을 적용하려고 합니다. 이는 :nth-last-of-type(n+3):nth-last-of-type(-n+6) 선택기를 사용하여 달성할 수 있습니다:

p:nth-last-of-type(n+3):nth-last-of-type(-n+6) {
  border: 1px solid black;
}

요약:

이 문서에서는 CSS를 소개했습니다. n번째 마지막 유형 의사 클래스 선택기의 다양한 응용 시나리오와 해당 코드 예제가 제공됩니다. :nth-last-of-type 선택자를 사용하면 지정된 유형의 n번째 형제 요소를 아래쪽에서 더 정확하게 선택하고 스타일을 적용할 수 있습니다. 이 글이 n번째 마지막 유형 선택기를 이해하고 적용하는 데 도움이 되기를 바랍니다.

위 내용은 CSS의 다양한 응용 시나리오 구현:nth-last-of-type 의사 클래스 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!