Selektor CSS untuk elemen pertama dengan kelas

Saya memiliki banyak elemen dengan nama kelas red, tetapi sepertinya saya tidak dapat memilih elemen pertama dengan class="red"menggunakan aturan CSS berikut:

.red:first-child {
    border: 5px solid red;
}

<p class="red"></p>
<div class="red"></div>

Apa yang salah dalam pemilih ini dan bagaimana cara memperbaikinya?

Berkat komentarnya, saya menemukan bahwa elemen tersebut harus menjadi anak pertama dari orang tuanya untuk dipilih yang bukan kasus yang saya miliki. Saya memiliki struktur berikut, dan aturan ini gagal seperti yang disebutkan dalam komentar:

.home .red:first-child {
    border: 1px 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>

Bagaimana saya bisa menargetkan anak pertama dengan kelas red?

Ini adalah salah satu contoh paling terkenal dari penulis yang salah mengerti bagaimana cara :first-childkerjanya. Diperkenalkan dalam CSS2 , :first-childpseudo-class mewakili anak pertama dari induknya . Itu dia. Ada kesalahpahaman yang sangat umum bahwa ia mengambil elemen anak mana saja yang pertama kali cocok dengan kondisi yang ditentukan oleh pemilih pemilih gabungan. Karena cara penyeleksi bekerja (lihat di sini untuk penjelasan), itu tidak benar.

Selectors level 3 memperkenalkan :first-of-typepseudo-class , yang mewakili elemen pertama di antara saudara kandung dari tipe elemennya. Jawaban ini menjelaskan, dengan ilustrasi, perbedaan antara :first-childdan :first-of-type. Namun, seperti halnya :first-child, itu tidak melihat kondisi atau atribut lainnya. Dalam HTML, tipe elemen diwakili oleh nama tag. Dalam pertanyaan, tipe itu adalahp .

Sayangnya, tidak ada :first-of-classkelas pseudo serupa untuk mencocokkan elemen anak pertama dari kelas yang diberikan. Salah satu solusi yang Lea Verou dan saya buat untuk ini (meskipun sepenuhnya independen) adalah dengan menerapkan gaya yang Anda inginkan untuk semua elemen Anda dengan kelas itu:

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

... lalu "batalkan" gaya untuk elemen dengan kelas yang datang setelah yang pertama , menggunakan kombinator saudara umum~ dalam aturan utama:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

Sekarang hanya elemen pertama dengan class="red"akan memiliki perbatasan.

Berikut ilustrasi tentang bagaimana aturan diterapkan:

<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. Tidak ada aturan yang diterapkan; tidak ada batas yang diberikan.
   Elemen ini tidak memiliki kelas red, jadi ini dilewati.

2. Hanya aturan pertama yang diterapkan; perbatasan merah diberikan.
   Elemen ini memiliki kelas red, tetapi tidak didahului oleh elemen apa pun dengan kelas reddi induknya. Jadi aturan kedua tidak diterapkan, hanya yang pertama, dan elemen menjaga perbatasannya.

3. Kedua aturan tersebut diterapkan; tidak ada batas yang diberikan.
   Elemen ini memiliki kelas red. Itu juga didahului oleh setidaknya satu elemen lain dengan kelas red. Dengan demikian kedua aturan tersebut diterapkan, dan borderdeklarasi kedua mengesampingkan yang pertama, dengan demikian "membatalkan", jadi untuk berbicara.

Sebagai bonus, meskipun diperkenalkan di Selectors 3, combinator saudara kandung sebenarnya cukup didukung oleh IE7 dan yang lebih baru, tidak seperti :first-of-typedan :nth-of-type()yang hanya didukung oleh IE9 dan seterusnya. Jika Anda membutuhkan dukungan browser yang bagus, Anda beruntung.

Faktanya, fakta bahwa combinator saudara adalah satu-satunya komponen penting dalam teknik ini, dan memiliki dukungan browser yang luar biasa, membuat teknik ini sangat fleksibel - Anda dapat mengadaptasinya untuk memfilter elemen dengan hal lain, selain pemilih kelas:

• Anda dapat menggunakan ini untuk bekerja di :first-of-typedalam IE7 dan IE8, dengan hanya menyediakan pemilih jenis daripada pemilih kelas (sekali lagi, lebih lanjut tentang penggunaannya yang salah di bagian selanjutnya):

  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 */
  }

• Anda dapat memfilter berdasarkan pemilih atribut atau pemilih sederhana lainnya alih-alih kelas.

• Anda juga dapat menggabungkan teknik pengesampingan ini dengan elemen semu meskipun elemen semu secara teknis bukan penyeleksi sederhana.

Perhatikan bahwa agar ini berfungsi, Anda harus tahu terlebih dahulu apa gaya default untuk elemen saudara Anda yang lain sehingga Anda dapat mengganti aturan pertama. Selain itu, karena ini melibatkan aturan utama dalam CSS, Anda tidak dapat mencapai hal yang sama dengan pemilih tunggal untuk digunakan dengan API Pemilih , atau pencari CSS Selenium .

Perlu disebutkan bahwa Penyeleksi 4 memperkenalkan ekstensi untuk :nth-child()notasi (awalnya merupakan kelas pseudo yang sama sekali baru :nth-match()), yang akan memungkinkan Anda untuk menggunakan sesuatu seperti :nth-child(1 of .red)sebagai pengganti hipotetis.red:first-of-class . Menjadi proposal yang relatif baru, belum ada implementasi interoperable yang cukup untuk dapat digunakan di lokasi produksi. Semoga ini akan segera berubah. Sementara itu, solusi yang saya sarankan harus bekerja untuk sebagian besar kasus.

Ingatlah bahwa jawaban ini mengasumsikan bahwa pertanyaannya adalah mencari setiap elemen anak pertama yang memiliki kelas tertentu. Tidak ada kelas pseudo atau bahkan solusi CSS generik untuk kecocokan n dari pemilih kompleks di seluruh dokumen - apakah solusi ada sangat tergantung pada struktur dokumen. jQuery menyediakan :eq(), :first, :lastdan lebih untuk tujuan ini, tapi catatan lagi bahwa mereka berfungsi sangat berbeda dari :nth-child()et al . Menggunakan Selectors API, Anda dapat menggunakan document.querySelector()untuk mendapatkan kecocokan pertama:

var first = document.querySelector('.home > .red');

Atau gunakan document.querySelectorAll()dengan pengindeks untuk memilih kecocokan spesifik:

var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc

Meskipun .red:nth-of-type(1)solusi dalam jawaban yang diterima asli oleh Philip Daubmeier berfungsi (yang semula ditulis oleh Martyn tetapi dihapus sejak itu), itu tidak berperilaku seperti yang Anda harapkan.

Misalnya, jika Anda hanya ingin memilih pmarkup asli Anda:

<p class="red"></p>
<div class="red"></div>

... maka Anda tidak dapat menggunakan .red:first-of-type(setara dengan .red:nth-of-type(1)), karena setiap elemen adalah yang pertama (dan satu-satunya) dari tipenya ( pdan divmasing - masing), sehingga keduanya akan dicocokkan oleh pemilih.

Ketika elemen pertama dari kelas tertentu juga merupakan yang pertama dari jenisnya , kelas pseudo akan bekerja, tetapi ini hanya terjadi secara kebetulan . Perilaku ini ditunjukkan dalam jawaban Philip. Saat Anda menempel pada elemen dengan tipe yang sama sebelum elemen ini, pemilih akan gagal. Mengambil markup yang diperbarui:

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

Menerapkan aturan dengan .red:first-of-typeakan berhasil, tetapi begitu Anda menambahkan yang lain ptanpa kelas:

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

... pemilih akan segera gagal, karena .redelemen pertama sekarang adalah elemen kedua p .

The :first-childpemilih dimaksudkan, seperti namanya mengatakan, untuk memilih anak pertama dari tag induk. Anak-anak harus disematkan dalam tag induk yang sama. Contoh persis Anda akan berfungsi (Coba saja di sini ):

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

Mungkin Anda telah menyarangkan tag Anda di tag induk yang berbeda? Apakah tag kelas Anda redbenar-benar tag pertama di bawah induk?

Perhatikan juga bahwa ini tidak hanya berlaku untuk tag seperti pertama di seluruh dokumen, tetapi setiap kali orang tua baru melilitnya, seperti:

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

firstdan thirdakan menjadi merah.

Memperbarui:

Saya tidak tahu mengapa martyn menghapus jawabannya, tetapi ia memiliki solusinya, :nth-of-typepemilih:

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

Kredit untuk Martyn . Lebih banyak info misalnya di sini . Perlu diketahui bahwa ini adalah pemilih CSS 3, oleh karena itu tidak semua browser akan mengenalinya (mis. IE8 atau lebih lama).

Jawaban yang benar adalah:

.red:first-child, :not(.red) + .red { border:5px solid red }

Bagian I: Jika elemen pertama ke induknya dan memiliki kelas "merah", itu akan mendapatkan perbatasan.
Bagian II: Jika elemen ".red" tidak pertama kali ke induknya, tetapi segera mengikuti elemen tanpa kelas ".red", elemen itu juga harus mendapatkan kehormatan perbatasan tersebut.

Biola atau itu tidak terjadi.

Jawaban Philip Daubmeier, meskipun diterima, tidak benar - lihat biola terlampir.
Jawaban BoltClock akan berfungsi, tetapi mendefinisikan dan menimpa gaya yang tidak perlu
(terutama masalah di mana ia akan mewarisi perbatasan yang berbeda - Anda tidak ingin mendeklarasikan yang lain ke perbatasan: tidak ada)

EDIT: Jika Anda memiliki "merah" mengikuti non-merah beberapa kali, setiap merah "pertama" akan mendapatkan perbatasan. Untuk mencegahnya, seseorang harus menggunakan jawaban BoltClock. Lihat biola

Anda bisa menggunakan first-of-typeataunth-of-type(1)

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

Jawaban di atas terlalu rumit.

.class:first-of-type { }

Ini akan memilih tipe kelas pertama. Sumber MDN

Untuk mencocokkan pemilih Anda, elemen harus memiliki nama kelas reddan harus menjadi anak pertama dari induknya.

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

Karena jawaban lain mencakup apa yang salah dengan itu, saya akan mencoba setengah lainnya, bagaimana cara memperbaikinya. Sayangnya, saya tidak tahu bahwa Anda memiliki solusi CSS saja di sini, setidaknya tidak yang dapat saya pikirkan . Ada beberapa opsi lain ....

1. Tetapkan firstkelas ke elemen saat Anda menghasilkannya, seperti ini:

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

   CSS:

   .first.red {
     border:5px solid red;
   }

   CSS ini hanya cocok dengan elemen dengan kelas dan keduanya . firstred

2. Sebagai alternatif, lakukan hal yang sama dalam JavaScript, misalnya inilah jQuery yang akan Anda gunakan untuk melakukan ini, menggunakan CSS yang sama seperti di atas:

   $(".red:first").addClass("first");

Saya mendapatkan yang ini di proyek saya.

div > .b ~ .b:not(:first-child) {
	background: none;
}
div > .b {
    background: red;
}

<div>
      <p class="a">The first paragraph.</p>
      <p class="a">The second paragraph.</p>
      <p class="b">The third paragraph.</p>
      <p class="b">The fourth paragraph.</p>
  </div>

Menurut masalah Anda yang diperbarui

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

bagaimana tentang

.home span + .red{
      border:1px solid red;
    }

Ini akan memilih kelas home , lalu span elemen dan akhirnya semua elemen .red yang ditempatkan segera setelah elemen span.

Referensi: http://www.w3schools.com/cssref/css_selectors.asp

Anda dapat menggunakan nth-of-type (1) tetapi pastikan bahwa situs tidak perlu mendukung IE7 dll, jika ini kasusnya gunakan jQuery untuk menambahkan kelas tubuh kemudian menemukan elemen melalui kelas tubuh IE7 lalu nama elemen, lalu tambahkan dalam styling n-anak untuk itu.

Anda dapat mengubah kode Anda menjadi seperti ini untuk membuatnya berfungsi

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

Ini bekerja untuk Anda

.home span + .red{
      border:3px solid green;
    }

Berikut ini adalah referensi CSS dari SnoopCode tentang itu.

Saya menggunakan CSS di bawah ini untuk memiliki gambar latar belakang untuk daftar ul li

#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){
  background-position: center;
  background-image: url(http://monagentvoyagessuperprix.j3.voyagesendirect.com/images/stories/images_monagentvoyagessuperprix/layout/icon-home.png);
  background-repeat: no-repeat;
}

<footer id="footer">
  <div class="module">
    <ul class="menu ">
      <li class="level1 item308 active current"></li>
      <li> </li>
    </ul> 
  </div>
  <div class="module">
    <ul class="menu "><li></li>
      <li></li> 
    </ul>
  </div>
  <div class="module">
    <ul class="menu ">
      <li></li>
      <li></li>
    </ul>
  </div>
</footer>

Coba ini :

    .class_name > *:first-child {
        border: 1px solid red;
    }

Untuk beberapa alasan tidak ada jawaban di atas yang tampaknya menangani kasus anak pertama dan satu - satunya orang tua yang nyata.

#element_id > .class_name:first-child

Semua jawaban di atas akan gagal jika Anda ingin menerapkan gaya hanya anak kelas satu dalam kode ini.

<aside id="element_id">
  Content
  <div class="class_name">First content that need to be styled</div>
  <div class="class_name">
    Second content that don't need to be styled
    <div>
      <div>
        <div class="class_name">deep content - no style</div>
        <div class="class_name">deep content - no style</div>
        <div>
          <div class="class_name">deep content - no style</div>
        </div>
      </div>
    </div>
  </div>
</aside>

Coba ini Sederhana dan Efektif

 .home > span + .red{
      border:1px solid red;
    }

Saya percaya bahwa menggunakan pemilih relatif + untuk memilih elemen yang ditempatkan segera setelah, bekerja di sini yang terbaik (seperti yang disarankan sebelumnya).

Mungkin juga untuk kasus ini menggunakan pemilih ini

.home p:first-of-type

tapi ini adalah pemilih elemen bukan yang kelas.

Di sini Anda memiliki daftar pemilih CSS yang bagus: https://kolosek.com/css-selectors/

Coba solusi ini:

 .home p:first-of-type {
  border:5px solid red;
  width:100%;
  display:block;
}

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

Tautan CodePen