클래스가 있는 첫 번째 요소에 대한 CSS 선택자

질문 : 클래스가있는 첫 번째 요소에 대한 CSS 선택기

---

클래스 이름이 red 인 여러 요소가 있지만 다음 CSS 규칙을 사용하여 class="red" 첫 번째 요소를 선택할 수없는 것 같습니다.

 

.home .red:first-child {
    border: 1px solid red;
}

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

red 클래스를 가진 첫 번째 어린이를 대상으로하려면 어떻게 수정합니까?

답변

---

:first-child 작동 방식을 오해하는 가장 잘 알려진 사례 중 하나입니다. CSS2에 도입 된 :first-child 가상 클래스는 부모의 첫 번째 자식을 나타냅니다. 그게 다야. 나머지 복합 선택기에서 지정한 조건과 가장 먼저 일치하는 자식 요소를 선택한다는 매우 일반적인 오해가 있습니다. 선택기가 작동하는 방식 ( 설명은 여기 참조) 때문에 이는 사실이 아닙니다.

선택기 레벨 3 은 요소 유형의 형제 중 첫 번째 요소를 나타내는 :first-of-type 가상 클래스를 도입합니다. 이 답변 :first-child 와 :first-of-type 의 차이점을 설명합니다. 그러나 :first-child 와 마찬가지로 다른 조건이나 속성을 보지 않습니다. HTML에서 요소 유형은 태그 이름으로 표시됩니다. 질문에서 그 유형은 p 입니다.

불행히도 주어진 클래스의 첫 번째 자식 요소와 일치하는 :first-of-class 의사 클래스는 없습니다. 이 답변이 처음 게시 되었을 때 새로 게시 된 Selectors 레벨 4의 FPWD 는 첫 번째 단락에서 언급했듯이 selector-list 인수를 추가하여 기존 선택기 메커니즘을 중심으로 설계된 :nth-match() pseudo-class를 도입했습니다. 원하는 필터링 동작을 얻기 위해 화합물 선택기의 나머지를 제공 할 수 있습니다. 최근 몇 년 동안이 기능은 선택 목록이 선택적인 두 번째 인수로 나타나는 :nth-child() 자체에 포함되어 :nth-match() 가 전체 문서 ()에서 일치하는 잘못된 인상을 방지합니다. 아래의 최종 참고를 참조하십시오).

브라우저 간 지원 을 기다리는 동안 (진지하게는 거의 10 년이 지났고 지난 5 년 동안 단일 구현 만있었습니다) Lea Verou 와 제가 독립적으로 개발 한 한 가지 해결 방법 (그녀가 먼저 수행했습니다!)은 다음과 같습니다. 먼저 해당 클래스 가있는 모든 요소에 원하는 스타일을 적용하려면 :

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

... 그런 다음 재정의 규칙에서 일반 형제 결합 자 ~ 를 사용하여 첫 번째 클래스 뒤에 오는 클래스가있는 요소의 스타일을 "실행 취소"합니다.

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

class="red" 첫 번째 요소에만 테두리가 있습니다.

다음은 규칙이 적용되는 방법에 대한 설명입니다.

 

.home > .red {
    border: 1px solid red;
}

.home > .red ~ .red {
    border: none;
}

<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>

1. 규칙이 적용되지 않습니다. 테두리가 렌더링되지 않습니다.
   이 요소에는 red 클래스가 없으므로 건너 뜁니다.
2. 첫 번째 규칙 만 적용됩니다. 빨간색 테두리가 렌더링됩니다.
   이 요소에는 red 클래스가 있지만 부모에 red 클래스가있는 요소가 앞에 나오지 않습니다. 따라서 두 번째 규칙은 적용되지 않고 첫 번째 규칙 만 적용되며 요소는 테두리를 유지합니다.
3. 두 규칙이 모두 적용됩니다. 테두리가 렌더링되지 않습니다.
   이 요소에는 red 클래스가 있습니다. red 클래스를 가진 하나 이상의 다른 요소가 앞에옵니다. 따라서 두 규칙이 모두 적용되고 두 번째 border 선언이 첫 번째 경계 선언보다 우선하므로 말하자면 "실행 취소"됩니다.

 

 

보너스로, 선택자 3에서 소개되었지만 일반 형제 결합자는 IE9 이상에서만 지원되는 :first-of-type 및 :nth-of-type() . 좋은 브라우저 지원이 필요하면 운이 좋습니다.

실제로 형제 결합자가이 기술에서 유일한 중요한 구성 요소 이고 놀라운 브라우저 지원을 제공한다는 사실은이 기술을 매우 다재다능하게 만듭니다. 클래스 선택기 외에도 다른 요소를 필터링하도록 조정할 수 있습니다.

• :first-of-type 을 해결할 수 있습니다 (이후 섹션의 질문에서 잘못된 사용법에 대해 자세히 설명합니다).

   article > p {
       /* Apply styles to article > p:first-of-type, which may or may not be :first-child */
   }
  
   article > p ~ p {
       /* Undo the above styles for every subsequent article > p */
   }

• 속성 선택기 또는 클래스 대신 다른 단순 선택기로 필터링 할 수 있습니다.
• 의사 요소가 기술적으로 단순 선택자가 아니더라도이 재정의 기술을 의사 요소와 결합 할 수도 있습니다.

이것이 작동하려면 첫 번째 규칙을 재정의 할 수 있도록 다른 형제 요소에 대한 기본 스타일이 무엇인지 미리 알아야합니다. 또한 여기에는 CSS의 규칙 재정의가 포함되므로 Selectors API 또는 Selenium 의 CSS 로케이터와 함께 사용하기위한 단일 선택기로 동일한 결과를 얻을 수 없습니다.

이 답변이 문제는 주어진 클래스를 가진 첫 번째 자식 요소의 수를 찾고 있다고 가정 최종 메모에서, 명심하십시오. 전체 문서 에서 복잡한 선택기의 n 번째 일치에 대한 의사 클래스도 일반 CSS 솔루션도 없습니다. 솔루션의 존재 여부는 문서 구조에 크게 좌우됩니다. jQuery는이 목적을 위해 :eq() , :first , :last :nth-child() et al과는 매우 다르게 작동 합니다. Selectors API를 사용하면 document.querySelector() 를 사용하여 첫 번째 일치 항목을 얻을 수 있습니다.

var first = document.querySelector('.home > .red');

또는 document.querySelectorAll() 사용하여 특정 일치 항목을 선택합니다.

var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc

Philip Daubmeier 가 원래 승인 한 답변의 .red:nth-of-type(1) 솔루션이 작동 하지만 (원래 Martyn이 작성했지만 이후 삭제됨) 예상대로 작동하지 않습니다.

예를 들어, 여기서 p

<p class="red"></p>
<div class="red"></div>

.red:first-of-type .red:nth-of-type(1) 과 동일)을 사용할 수 없습니다. 각 요소가 해당 유형의 첫 번째 (유일한) 유형 ( p 및 div 각각)이므로 둘 다 선택기에 의해 일치됩니다.

특정 클래스의 첫 번째 요소 도 해당 유형 의 첫 번째 요소이면 의사 클래스가 작동하지만 이는 우연히 발생합니다 . 이 동작은 Philip의 대답에 나와 있습니다. 이 요소 앞에 동일한 유형의 요소를 붙이는 순간 선택기가 실패합니다. 질문에서 마크 업 가져 오기 :

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

.red:first-of-type 을 사용하여 규칙을 적용하면 작동하지만 클래스없이 p

<div class="home">
  <span>blah</span>
  <p>dummy</p>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

.red 요소가 이제 두 번째 p 요소이기 때문에 선택기가 즉시 실패합니다.

출처 : https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class