>웹 프론트엔드 >CSS 튜토리얼 >복잡한 HTML 구조 내에서 특정 클래스를 가진 첫 번째 요소를 선택하는 방법은 무엇입니까?

복잡한 HTML 구조 내에서 특정 클래스를 가진 첫 번째 요소를 선택하는 방법은 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-11-13 10:44:02240검색

How to Select the First Element with a Specific Class Within a Complex HTML Structure?

주어진 클래스의 첫 번째 요소를 선택하는 방법

HTML 요소로 작업할 때 스타일 지정이나 조작을 위해 특정 요소를 선택하는 것이 중요합니다. 한 가지 시나리오는 다른 요소 내에서 첫 번째 클래스 발생을 대상으로 하며, 원하는 클래스의 위치가 여러 요소 내에서 다를 때 문제를 제시하는 것입니다.

이 맥락에서 우리는 '클래스'가 있는 첫 번째 요소를 선택하는 것을 목표로 합니다. ID 또는 클래스 'B'로 식별되는 요소 내의 A'입니다. 문제는 'B'가 이름과 구조 모두 다를 수 있고 'A' 요소가 'B' 내에서 위치가 일관되지 않을 때 발생합니다. 그러나 한 가지 일관된 요소는 남아 있습니다: 외부 요소 'C'의 존재입니다.

해결책: 형제 선택기 활용

CSS3은 다음을 선택하는 :first-of-type 의사 클래스를 도입합니다. 형제 중 해당 유형의 첫 번째 요소입니다. 불행하게도 CSS에는 :first-of-class 의사 클래스가 없습니다. 따라서 대체 해결 방법이 필요합니다.

한 가지 접근 방식은 목표를 달성하기 위해 재정의 스타일과 함께 일반 형제 조합 기호(~)를 활용하는 것입니다. 이 기술은 CSS가 하향식 방식으로 스타일을 적용한다는 사실을 활용합니다. 두 가지 규칙을 정의하면 원하는 기준과 일치하지 않는 '.A' 요소의 기본 스타일을 무시할 수 있습니다.

.C > * > .A {
  /* Styles for all '.A' elements that are grandchildren of '.C' */
}

.C > * > .A ~ .A {
  /* Styles for '.A' elements that follow the first '.A' child of any element that is a child of '.C' */
}

이 규칙에서 첫 번째 규칙은 '의 모든 '.A' 손자를 대상으로 합니다. 기음'. 여기에는 우리가 원하는 첫 번째 항목이 포함되어 있으므로 두 번째 규칙을 사용하여 후속 '.A' 요소에 대해 이 스타일을 "실행 취소"해야 합니다. 이는 ~ 결합자를 사용하여 동일한 상위 아래의 다른 '.A' 요소 뒤에 오는 '.A' 요소만 선택함으로써 수행됩니다.

스타일 적용 방법

이 방법을 설명하려면 기술이 작동하면 다음 HTML 구조를 고려하십시오.

<div class="C">
  <div class="B">
    <div class="E">Content <!-- [1] --></div>
    <div class="F">Content <!-- [1] --></div>
    <div class="A">Content <!-- [2] --></div>
    <div class="A">Content <!-- [3] --></div>
  </div>
  <!-- ... other elements ... -->
</div>

여기서 '[1]'은 기준을 충족하지 않는 요소를 나타내고 '[2]'는 '[3]'은 다르게 스타일을 지정하려는 첫 번째 및 후속 '.A' 요소를 나타냅니다.

  1. 첫 번째 규칙은 '.C'의 손자 요소인 모든 '.A' 요소의 스타일을 지정합니다. . 여기에는 '[2]' 및 '[3]' 요소가 포함됩니다.
  2. 두 번째 규칙은 동일한 상위 아래의 다른 '.A' 요소 뒤에 오는 모든 '.A' 요소를 대상으로 합니다. 여기에는 '[3]' 요소가 포함되지만 '.A' 클래스의 선행 형제가 없기 때문에 '[2]' 요소는 포함되지 않습니다.

결과적으로 요소 '[2]'(첫 번째 '.A')는 기본 스타일을 유지하는 반면 '[3]' 요소는 두 번째 규칙에 의해 스타일이 재정의됩니다. 따라서 '.C' 요소의 컨텍스트 내에서 '.A' 클래스가 처음 나타나는 것을 성공적으로 타겟팅하고 스타일을 지정했습니다.

위 내용은 복잡한 HTML 구조 내에서 특정 클래스를 가진 첫 번째 요소를 선택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.