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클래스 선택기(또는 유형 선택기)를 유사 클래스와 함께 사용하는 것은 요소가 주어진 클래스(또는 주어진 유형)를 가지고 있고 요소의 형제자매 중에서 해당 유형의 첫 번째인 경우 요소를 선택하는 것을 의미합니다.

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

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

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

초안 CSS Selectors Level 4는 다음을 추가할 것을 제안합니다.of <other-selector>선택기 내의 문법.이렇게 하면 지정된 다른 선택기와 일치하는 n번째 자식을 선택할 수 있습니다.

:nth-child(1 of p.myclass) 

이전 초안에서는 새로운 유사 클래스를 사용했으므로 이 기능에 대한 일부 토론에서 구문을 볼 수 있습니다.

:nth-match(1 of p.myclass)

이 기능은 이제 WebKit에서 구현되었으므로 Safari에서 사용할 수 있지만 이 기능을 지원하는 유일한 브라우저로 보입니다.Blink (Chrome), Gecko (Firefox) 및 Edge에서 구현 요청에 대한 티켓이 제출되었지만, 이 중 어느 것에도 뚜렷한 진전이 없습니다.

이것은 주어진 클래스 이름을 가진 첫 번째 요소를 선택하기 위해 CSS3 선택기:first-of-type을 사용할 수 없습니다.

그러나 대상 요소에 이전 요소 형제자매가 있는 경우 부정 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}

그나저나, 왜 그런지 모르겠어요.:last-of-type작동하지만,:first-of-type작동하지 않습니다.

jfiddle에 대한 내 실험은...https://jsfiddle.net/aspanoz/m1sg4496/

이것은 오래된 스레드이지만 검색 결과 목록에서 여전히 상위에 표시되어 응답합니다.이제 미래가 왔으므로 :n번째 자식 유사 선택기를 사용할 수 있습니다.

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/ : n번째 자녀

같은 클래스의 형제인 클래스의 모든 요소를 선택하고 반전시키면 페이지의 거의 모든 요소가 선택되므로 클래스별로 다시 선택해야 합니다.

예:

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

대체 솔루션으로 클래스를 다음과 같은 상위 요소로 래핑할 수 있습니다.

<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{}잘 작동했습니다.이것은 제가 그것들을 클래스나 스타일링 없이 디브 안에 포장한 후에 수정되었습니다.

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>

저는 작동하는 것을 찾았습니다. 만약 당신이 그리드와 같은 것을 포함하는 더 큰 클래스가 있다면, 당신은 다른 클래스의 모든 요소를 포함할 수 있습니다. 그렇게 할 수 있습니다.

div.col-md-4:nth-child(1).myclass{    
border: 1px solid #000;     
}        

단히간:first왜 아직도 언급이 안 되는 거죠?

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