Pemilih CSS3: tipe pertama dengan nama kelas?

Apakah mungkin menggunakan pemilih CSS3 :first-of-typeuntuk memilih elemen pertama dengan nama kelas yang diberikan? Saya belum berhasil dengan tes saya jadi saya pikir tidak?

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

Tidak, tidak mungkin menggunakan hanya satu pemilih. The :first-of-typepseudo-class memilih elemen pertama dari yang jenis ( div,p , dll). Menggunakan pemilih kelas (atau pemilih jenis) dengan kelas pseudo berarti memilih elemen jika memiliki kelas yang diberikan (atau dari jenis yang diberikan) dan merupakan yang pertama dari jenisnya di antara saudara kandungnya.

Sayangnya, CSS tidak menyediakan :first-of-classpemilih yang hanya memilih kemunculan pertama kelas. Sebagai solusinya, Anda dapat menggunakan sesuatu seperti ini:

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

Penjelasan dan ilustrasi untuk solusi diberikan di sini dan di sini .

Draf Selektor CSS Level 4 mengusulkan untuk menambahkan of <other-selector>tata bahasa di dalam :nth-childpemilih . Hal ini akan memungkinkan Anda untuk memilih yang n th anak pencocokan pemilih lain yang diberikan:

:nth-child(1 of p.myclass) 

Draf sebelumnya menggunakan pseudo-class baru :nth-match(), sehingga Anda dapat melihat sintaks itu dalam beberapa diskusi fitur:

:nth-match(1 of p.myclass)

Ini sekarang telah diterapkan di WebKit , dan karenanya tersedia di Safari, tetapi itu tampaknya satu-satunya browser yang mendukungnya . Ada tiket yang diajukan untuk mengimplementasikannya Blink (Chrome) , Gecko (Firefox) , dan permintaan untuk mengimplementasikannya di Edge , tetapi tidak ada kemajuan yang jelas pada semua ini.

Ini tidak mungkin untuk menggunakan pemilih CSS3 : tipe pertama untuk memilih elemen pertama dengan nama kelas yang diberikan.

Namun, jika elemen yang ditargetkan memiliki elemen saudara sebelumnya, Anda dapat menggabungkan negasi CSS pseudo-class dan pemilih saudara yang berdekatan untuk mencocokkan elemen yang tidak langsung memiliki elemen sebelumnya dengan nama kelas yang sama:

:not(.myclass1) + .myclass1

Contoh kode kerja lengkap:

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>

Saya menemukan solusi untuk referensi Anda. dari beberapa div grup pilih dari grup dua div kelas yang sama yang pertama

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

BTW, saya tidak tahu mengapa :last-of-typebekerja, tetapi :first-of-typetidak berhasil.

Eksperimen saya di jsfiddle ... https://jsfiddle.net/aspanoz/m1sg4496/

Ini adalah utas lama, tetapi saya merespons karena masih muncul tinggi dalam daftar hasil pencarian. Sekarang setelah masa depan telah tiba, Anda dapat menggunakan: nth-child pseudo-selector.

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

Selektor pseudo-anak-n sangat kuat - tanda kurung menerima rumus serta angka.

Lebih lanjut di sini: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Sebagai solusi fallback, Anda bisa membungkus kelas Anda dalam elemen induk seperti ini:

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

Tidak yakin bagaimana menjelaskan ini tetapi saya mengalami sesuatu yang serupa hari ini. Tidak dapat diatur .user:first-of-type{}saat .user:last-of-type{}bekerja dengan baik. Ini diperbaiki setelah saya membungkusnya di dalam div tanpa kelas atau gaya:

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>

Anda dapat melakukan ini dengan memilih setiap elemen kelas yang merupakan saudara kandung dari kelas yang sama dan membalikkannya, yang akan memilih hampir setiap elemen pada halaman, jadi Anda harus memilih lagi oleh kelas.

misalnya:

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

Cukup :firstbekerja untuk saya, mengapa ini belum disebutkan?