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

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

---

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

코드 ( http://jsfiddle.net/YWY4L/ ) :

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; }

The :nth-child pseudo-selector is powerful - the parentheses accept formulas as well as numbers.

More here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

---

As a fallback solution, you could wrap your classes in a parent element like this:

<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>

---

Not sure how to explain this but I ran into something similar today. Not being able to set .user:first-of-type{} while .user:last-of-type{} worked fine. This was fixed after I wrapped them inside a div without any class or styling:

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>

---

You can do this by selecting every element of the class that is the sibling of the same class and inverting it, which will select pretty much every element on the page, so then you have to select by the class again.

eg:

<style>
    :not(.bar ~ .bar).bar {
        color: red;
    }
<div>
    <div class="foo"></div>
    <div class="bar"></div> <!-- Only this will be selected -->
    <div class="foo"></div>
    <div class="bar"></div>
    <div class="foo"></div>
    <div class="bar"></div>
</div>

---

Simply :first works for me, why isn't this mentioned yet?

참고URL : https://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name