[css] 클래스가있는 첫 번째 요소의 CSS 선택기

이것은 저자들이 어떻게 :first-child작동 하는지 오해하는 가장 잘 알려진 예 중 하나입니다 . CSS2에 도입 의 :first-child의사 클래스를 대표하는 부모의 최초의 아이를 . 그게 다야. 나머지 복합 선택기에서 지정한 조건과 가장 먼저 일치하는 하위 요소를 선택한다는 잘못된 오해가 있습니다. 선택기가 작동하는 방식 ( 설명 은 여기 를 참조 하십시오) 으로 인해 이는 사실이 아닙니다.

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

불행히도, :first-of-class주어진 클래스의 첫 번째 자식 요소와 일치하는 유사 의사 클래스 는 없습니다 . 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"테두리가 있습니다.

규칙이 적용되는 방법은 다음과 같습니다.

<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 년에 도입되었지만 달리 보너스로, 일반 형제 연결자, 꽤 IE7에서 잘 지원 및 최신 버전 인 :first-of-type및 :nth-of-type()단지 이후 IE9에서 지원하는. 좋은 브라우저 지원이 필요하다면 운이 좋을 것입니다.

사실, 형제 콤비는이 기술의 유일한 중요한 구성 요소입니다, 사실 과 , 그와 같은 놀라운 브라우저 지원이 매우 다양한이 기술을 만드는 – 당신은 클래스 선택기 외에 다른 것들에 의해 요소를 필터링을 적용 할 수 있습니다 :

• :first-of-type클래스 선택기 대신 유형 선택기를 제공하여 IE7 및 IE8 에서이 문제를 해결할 수 있습니다 (다시 말해서 여기에서 잘못된 사용법에 대한 자세한 내용 참조).

  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 로케이터 와 함께 사용하기 위해 단일 선택기로 동일한 작업을 수행 할 수 없습니다 .

Selectors 4 는 :nth-child()표기법에 대한 확장 (원래 완전히 새로운 의사 클래스 :nth-match()) :nth-child(1 of .red)을 도입하여 가상 대신에 무언가를 사용할 수 있음을 언급 할 가치가 있습니다 .red:first-of-class. 비교적 최근의 제안으로 인해 프로덕션 사이트에서 아직 사용할 수있을 정도로 상호 운용 가능한 구현이 충분하지 않습니다. 잘만되면 이것이 곧 바뀔 것이다. 그 동안 제안한 해결 방법은 대부분의 경우 효과적입니다.

이 답변은 질문이 주어진 클래스를 가진 모든 첫 번째 자식 요소를 찾고 있다고 가정합니다. 전체 문서 에서 복잡한 선택기의 n 번째 일치에 대한 의사 클래스 또는 일반 CSS 솔루션이 없습니다 . 솔루션의 존재 여부는 문서 구조에 따라 크게 다릅니다. jQuery를이 제공 :eq(), :first, :last이 목적을 위해 더, 그러나 다시 노트는 것을 그들은 매우 다르게에서 기능 :nth-child()등 . 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

필립 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합니다.

답변

<body>
    <p class="red">first</p>
    <div class="red">second</div>
</body>

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

.red:nth-of-type(1)
{
    border:5px 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, :not(.red) + .red { border:5px solid red }

.red {
  color: green;
}

/* .red:nth-of-type(1) */
.red:first-of-type {
  color: 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>

.class:first-of-type { }

<div>
    <span class="red"> <!-- MATCH -->
</div>

<div>
    <span>Blah</span>
    <p class="red"> <!-- NO MATCH -->
</div>

<div>
    <span>Blah</span>
    <div><p class="red"></div> <!-- MATCH -->
</div>