Selektor CSS untuk elemen pertama dengan kelas


947

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?


bagi mereka yang menjadi bingung karena berbagai jenis elemen dalam contoh saya (p, div), menjadikannya sama juga tidak berfungsi dan masalahnya masih ada.
Rajat

4
Saya pikir ini adalah bagaimana: pemilih anak pertama seharusnya bekerja ...
Felix Eve

28
: anak pertama tidak akan menjadi nama yang sangat bagus saat itu. Jika Anda memiliki seorang putra, dan kemudian seorang putri, Anda tidak akan menyebut putri Anda anak sulung Anda. Demikian pula, .home> .red pertama bukanlah anak pertama dari .home, jadi tidak pantas untuk menyebutnya demikian.
BoltClock

Tidak, begitulah seharusnya: tipe pertama bekerja
Evan Thompson

@EvanThompson Begitulah cara :first-of-type melakukan pekerjaan.
TylerH

Jawaban:


1427

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 .


15
Jadi, apakah ada cara untuk meniru :last-of-class? Pilih elemen terakhir dari sebuah kelas.
Rocket Hazmat

1
@Rocket: Bukannya aku bisa melihat :(
BoltClock

4
Teknik yang bagus dengan saudara kandung. Mungkin patut dicatat bahwa ini bekerja dengan beberapa kombinator kombinator juga, misalnya p ~ p ~ p akan memilih item ketiga dan seterusnya: jsfiddle.net/zpnnvedm/1
Legolas

2
@BoltClock Ya, maaf, saya datang ke sini untuk mencari solusi dan saya tidak terlalu peduli dengan kasus khusus OP. Saya sebenarnya tidak bisa mengerti mengapa general sibling selector ~karya seperti :not(:first-of-*)untuk tipe tertentu, saya berasumsi bahwa itu harus menerapkan aturan untuk setiap elemen yang cocok, tetapi itu diterapkan hanya untuk pertandingan pertama bahkan ketika ada 3 atau lebih kemungkinan pertandingan.
Gerard Reches

2
Menurut caniuse , :nth-child(1 of .foo)ekstensi telah diterapkan di Safari 9.1+. (Saya belum memeriksa)
Danield

330

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


Mungkin salah saya - seperti yang saya tunjukkan kepada Martyn bahwa pemilih CSS3 suka :nth-of-typemengalami sedikit masalah karena tidak berfungsi sama sekali dalam versi IE apa pun saat ini.
Már Örlygsson

25
Saya agak bingung membaca ini. Strictly .red:nth-of-type(1)akan memilih elemen apa saja yang (a) adalah anak pertama dari jenis elemennya, dan (b) memiliki kelas "merah". Jadi jika, dalam contoh, <p> pertama tidak memiliki kelas "merah", itu tidak akan dipilih. Atau jika <span> dan <p> pertama keduanya memiliki kelas "merah", keduanya akan dipilih. jsfiddle.net/fvAxn
David

7
@Dan Mundy: :first-of-typesetara dengan :nth-of-type(1), jadi tentu saja itu berfungsi juga. Itu juga bisa gagal, dengan cara yang sama karena alasan yang sama yang dinyatakan dalam jawaban saya.
BoltClock

4
@ David Saya yakin :nth-of-typeberarti "elemen / tag" ketika dikatakan "ketik". Jadi itu hanya mempertimbangkan elemen, bukan hal-hal seperti kelas.
gcampbell

2
@ gcampbell: Ya, itulah artinya, dan itulah mengapa jawaban ini cacat. Alasan kata "type" dipilih adalah agar tidak memadukan Selectors dengan HTML / XML, karena tidak semua bahasa memiliki konsep "tag" yang mendefinisikan elemen.
BoltClock

74

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


2
Jawaban ini tidak salah, pemilih adalah benar untuk markup yang diberikan, tapi saya harus menegaskan kembali bahwa situasi yang disebutkan di edit adalah alasan mengapa saya menyatakan bahwa override diperlukan setidaknya ketika Anda tidak dapat menjamin struktur markup - hanya karena .redBerikut :not(.red)ini tidak selalu membuatnya menjadi yang pertama di .redantara saudara kandungnya. Dan jika perbatasan perlu diwariskan, itu hanya masalah mendeklarasikan border: inheritalih-alih border: nonedalam aturan override.
BoltClock

3
Solusi ini adalah IMO terbaik karena Anda dapat dengan mudah melakukan hal yang sama untuk anak terakhir.
A1rPun

@ A1rPun Bagaimana Anda mengubahnya untuk anak terakhir?
Willem

@Willem Hanya perubahan first-childke last-child, tapi saya lihat setelah pengujian bahwa ini tidak selalu melakukan trik.
A1rPun

3
Maaf, tetapi tidak cocok dengan "elemen anak pertama yang memiliki kelas .red", melainkan cocok dengan "elemen pertama jika elemen tersebut memiliki elemen .red dan .red pertama setelah elemen yang bukan .red". Keduanya tidak setara. Fiddle: jsfiddle.net/Vq8PB/166
Gunchars

19

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>


6
Ini tidak akan berfungsi jika Anda memiliki <p></p>antara spandan pelemen pertama Anda dengan redkelas. Lihatlah JSFiddle ini .
Francisco Romero

1
Saya melihat sekarang bahwa itu mereproduksi dalam contoh terakhir dari jawabannya perilaku yang sama yang saya tunjukkan di sini. Ketika saya mencoba contoh Anda dan "bermain" sedikit, saya perhatikan perilaku itu dan saya ingin menunjukkan sehingga pembaca di masa depan akan sadar.
Francisco Romero

13

Jawaban di atas terlalu rumit.

.class:first-of-type { }

Ini akan memilih tipe kelas pertama. Sumber MDN


4
Saya tidak dapat menemukan referensi untuk tipe pertama, dan tipe pertama hanya berlaku untuk nama tag; apakah Anda yakin jawaban ini benar?
Matt Broatch

1
first-type telah berganti nama menjadi first-of-type
Gabriel Fair

7
Itu tidak bekerja dengan kelas. Begitulah seharusnya bekerja, karena memilih n dari kelas akan lebih berguna daripada memilih n dari tag. Tapi ': tipe pertama' hanya pernah bekerja dengan tagName. Jika kebetulan bahwa 'kelas satu' dan 'tanda pertama' merujuk pada elemen yang sama, yang sering mereka lakukan, mudah untuk membingungkan diri Anda sehingga berpikir itu bekerja seperti itu; dan kemudian bertanya-tanya apa yang rusak ketika Anda datang ke sebuah kasus di mana mereka tidak.
Evan Thompson

2
Tidak yakin mengapa ini bukan jawaban yang dipilih. Ini melakukan persis apa yang diminta OP, dan berfungsi dengan baik. SMH.
Bernesto

1
@Ernesto, ketika Anda memiliki kasus di mana Anda memiliki beberapa elemen dari "tipe" yang sama, katakanlah <span>, dan beberapa memiliki kelas highlight. The .highlight:first-of-typepemilih akan memilih contoh pertama dari "jenis" dengan kelas yang dipilih, dalam contoh ini yang pertama <span>, dan bukan contoh pertama dari kelas highlight. Hanya jika instance span pertama itu juga memiliki highlight kelas maka style akan diimplementasikan. ( codepen.io/andrewRmillar/pen/poJKJdJ )
Sl4rtib4rtf4st

9

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>

ini benar dan ini tampaknya menjadi masalah saya tetapi apakah ada cara untuk memilih elemen pertama dengan kelas terlepas dari apakah itu didahului oleh elemen lain?
Rajat

Jika Anda telah melihat jawaban Martyns Anda tidak perlu menanyakan hal ini :)
Philip Daubmeier

9

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 datang dengan solusi CSS saja beberapa waktu lalu ; Saya telah mereproduksi di sini sebagai jawaban kanonik.
BoltClock

1
Selama tidak ada yang seperti :first-of-class, saya juga menyarankan untuk menambahkan kelas tambahan ke elemen pertama. Tampaknya solusi termudah untuk saat ini.
Kai Noack

7

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>


5

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


3

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.


3

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.


3

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>


2

Coba ini :

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

2

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>

1
Jawaban Anda pada dasarnya sudah terkandung dalam dua jawaban teratas teratas untuk pertanyaan ini dan tidak menambahkan apa pun. Juga, penggunaan kelas :first-childpseudo Anda menyesatkan karena ia menambahkan .class_namesebelum tidak mengubah cara kerjanya dan hanya membuatnya bertindak sebagai filter. Jika Anda memiliki div sebelumnya <div class="class_name">First content that need to be styled</div>maka pemilih Anda tidak akan cocok karena itu bukan anak pertama yang sebenarnya.
j08691

Saya tidak berpikir itu lurus ke depan untuk seseorang yang membutuhkan info. Dan ya, Anda benar tentang kasus ini. Ini melayani kasus yang lebih spesifik. Inilah mengapa saya pikir ini mungkin berguna.
Yavor Ivanov

Inilah yang saya butuhkan, tepat dan ringkas. Terima kasih @YavorIvanov
quantme

1

Coba ini Sederhana dan Efektif

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

-1

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/


-2

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


Pertanyaannya adalah " pemilih CSS untuk elemen pertama dengan kelas ", bukan " pemilih CSS untuk elemen pertama dengan nama tag ".
GeroldBroser mengembalikan Monica
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.