[css] CSS3 선택기 : 클래스 이름이있는 첫 번째 유형?

CSS3 선택기를 사용하여 :first-of-type주어진 클래스 이름을 가진 첫 번째 요소를 선택할 수 있습니까? 시험에 성공하지 못해서 시험이 아닌 것 같아요?

p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

스 니펫 확장

답변

아니요, 하나의 선택기를 사용하는 것은 불가능합니다. :first-of-type가상 클래스는 그것의 첫 번째 요소를 선택 입력 ( div, p등). 가 주어진 클래스를 갖는다 (또는 특정 유형 인) 경우 해당 가상 클래스 수단과 클래스 선택기 (또는 타입 selector)를 사용하여 소자를 선택 하고 그 형제들 중 그 타입의 제이다.

불행히도 CSS는 :first-of-class클래스의 첫 번째 항목 만 선택 하는 선택기를 제공하지 않습니다 . 해결 방법으로 다음과 같은 것을 사용할 수 있습니다.

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

해결 방법에 대한 설명과 그림은 여기 와 여기에 있습니다 .

답변

CSS 선택기 레벨 4 초안 of <other-selector>에서는 :nth-child선택기 내에 문법 을 추가 할 것을 제안합니다 . 이를 통해 주어진 다른 선택기와 일치하는 n 번째 자식 을 선택할 수 있습니다 .

:nth-child(1 of p.myclass)

이전 초안에는 새로운 의사 클래스가 사용 :nth-match()되었으므로 기능에 대한 일부 토론에서 해당 구문을 볼 수 있습니다.

:nth-match(1 of p.myclass)

이것은 이제 WebKit 에서 구현되어 Safari에서 사용할 수 있지만이 를 지원하는 유일한 브라우저 인 것 같습니다 . 이를 구현하기위한 신청 티켓이 있습니다 블링크 (크롬) , 도마뱀 (파이어 폭스) 및 에지에서 그것을 구현하는 요청을 하지만, 이들의에 뚜렷한 진전이.

답변

이것은 하지 가능한 CSS3 셀렉터 사용하는 최초의 형 : 지정된 클래스 이름으로 첫 번째 요소를 선택합니다.

그러나 대상 요소에 이전 요소 형제가있는 경우 부정 CSS 의사 클래스 와 인접한 형제 선택기 를 결합하여 클래스 이름이 동일한 이전 요소가없는 요소와 일치시킬 수 있습니다.

:not(.myclass1) + .myclass1

전체 작업 코드 예 :

p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { color: green }

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

스 니펫 확장

답변

귀하의 참조에 대한 해결책을 찾았습니다. 일부 그룹 div에서 두 개의 동일한 클래스 div 그룹에서 선택하십시오.

p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}

BTW, 왜 :last-of-type작동 하는지 모르겠지만 작동 :first-of-type하지 않습니다.

jsfiddle에 대한 나의 실험 … https://jsfiddle.net/aspanoz/m1sg4496/

답변

이것은 오래된 스레드이지만 검색 결과 목록에서 여전히 높게 나타나기 때문에 응답하고 있습니다. 미래가 도래 했으므로 : nth-child 의사 선택기를 사용할 수 있습니다.

p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }

: n 번째 자식 의사 선택기는 강력합니다. 괄호는 숫자와 수식을 허용합니다.

더 여기 : https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

답변

폴백 솔루션으로 클래스를 다음과 같은 부모 요소로 래핑 할 수 있습니다.

<div>
    <div>This text should appear as normal</div>
    <p>This text should be blue.</p>
    <div>
        <!-- first-child / first-of-type starts from here -->
        <p class="myclass1">This text should appear red.</p>
        <p class="myclass2">This text should appear green.</p>
    </div>
</div>

답변

이것을 설명하는 방법을 모르겠지만 오늘 비슷한 것을 만났습니다. 잘 작동 .user:first-of-type{}하는 동안 설정할 수 없습니다 .user:last-of-type{}. 클래스 나 스타일링없이 div 안에 포장 한 후에 수정되었습니다.

https://codepen.io/adrianTNT/pen/WgEpbE

<style>
.user{
  display:block;
  background-color:#FFCC00;
}

.user:first-of-type{
  background-color:#FF0000;
}
</style>

<p>Not working while this P additional tag exists</p>

<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>

<p>Working while inside a div:</p>

<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>