tidak: pemilih anak pertama


811

Saya memiliki divtag yang berisi beberapa ultag.

Saya dapat menetapkan properti CSS hanya untuk ultag pertama :

div ul:first-child {
    background-color: #900;
}

Namun, upaya saya berikut untuk mengatur properti CSS untuk setiap ultag lain kecuali yang pertama tidak berfungsi:

div ul:not:first-child {
    background-color: #900;
}

div ul:not(:first-child) {
    background-color: #900;
}

div ul:first-child:after {
    background-color: #900;
}

Bagaimana saya bisa menulis dalam CSS: "setiap elemen, kecuali yang pertama"?

Jawaban:


1415

Salah satu versi yang diposting benar-benar bekerja untuk semua browser modern (di mana CSS penyeleksi tingkat 3 yang didukung ):

div ul:not(:first-child) {
    background-color: #900;
}

Jika Anda perlu mendukung browser lawas, atau jika Anda terhalang oleh keterbatasan:not pemilih (itu hanya menerima pemilih sederhana sebagai argumen) maka Anda dapat menggunakan teknik lain:

Tetapkan aturan yang memiliki cakupan lebih besar dari apa yang Anda inginkan dan kemudian "mencabutnya" secara kondisional, membatasi cakupannya dengan apa yang Anda inginkan:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

Ketika membatasi ruang lingkup gunakan nilai default untuk setiap atribut CSS yang Anda atur.


Anda tahu persis versi apa yang tidak didukung pada ini?
Simon_Weaver

9
@Simon_Weaver: Dalam praktiknya semuanya kecuali IE <9 mendukungnya. Sumber yang bagus untuk mendapatkan informasi semacam ini adalah caniuse.com .
Jon

2
Hmm .. hati-hati dengan pembatasan solusi pertama: caniuse.com/#feat=css-not-sel-list Yang kedua terdengar lebih masuk akal bagi saya. Terima kasih!
iorrah

@iorrah tautan caniuse Anda untuk daftar pemilih, dan ya, dukungan masih sangat terbatas. OP tidak menggunakan daftar pemilih. Jadi saya pikir https://caniuse.com/#feat=css-sel3 lebih sesuai dengan dukungan besar di luar masa IE8.
secretwep

Ini berfungsi bahkan tanpa elemen div di awal di chrome.
Achraf JEDAY

158

Solusi CSS2 ini ("any ulafter another ul") juga berfungsi dan didukung oleh lebih banyak browser.

div ul + ul {
  background-color: #900;
}

Tidak seperti :notdan :nth-sibling, pemilih saudara yang berdekatan didukung oleh IE7 +.

Jika Anda memiliki JavaScript yang mengubah properti ini setelah halaman dimuat, Anda harus melihat beberapa bug yang dikenal dalam implementasi IE7 dan IE8 ini. Lihat tautan ini .

Untuk halaman web statis apa pun, ini harus bekerja dengan sempurna.


4
@ Leven: Tautan quirksmode mengatakan itu harus bekerja di IE7, tetapi hanya secara statis. Jika JS Anda menempatkan elemen lain di depannya, itu mungkin tidak diperbarui dengan benar. Apakah itu masalah yang Anda lihat?
Alex Quinn

mungkin perlu dicatat bahwa dalam urutan elemen seperti: ul ul div ul(di mana elemen-elemen ini bersaudara), hanya ul kedua yang akan dipilih, karena yang terakhir tidak memiliki ulsebelumnya untuk dirinya sendiri
Brian H.

79

Karena :nottidak diterima oleh IE6-8 , saya akan menyarankan Anda ini:

div ul:nth-child(n+2) {
    background-color: #900;
}

Jadi Anda memilih setiap ulelemen induknya kecuali yang pertama .

Lihat artikel Chris Coyer "Useful: nth-child Recipes" untuk nth-child contoh lebih lanjut .


yang sebenarnya masih menggunakan IE6-8 pada tahun 2019?
oldboy

15
Mengingat jawabannya adalah dari tahun 2013?
aasukisuki


14

not(:first-child)sepertinya tidak berfungsi lagi. Setidaknya dengan versi Chrome dan Firefox yang lebih baru.

Alih-alih, coba ini:

ul:not(:first-of-type) {}

6
Keduanya bekerja, tetapi memiliki makna yang berbeda. ul:not(:first-child)berarti secara harfiah " ulelemen apa pun yang bukan anak pertama dari induknya", jadi elemen tersebut tidak akan cocok dengan elemen pertama uljika elemen tersebut didahului oleh elemen lain ( p, pos, dll.). Sebaliknya, ul:not(:first-of-type)berarti " ulelemen apa pun kecuali 1 uldalam wadah". Anda benar bahwa OP mungkin membutuhkan perilaku yang terakhir, tetapi penjelasan Anda agak menyesatkan.
Ilya Streltsyn

9

Anda dapat menggunakan pemilih mana saja dengan not

p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}

4

Saya tidak beruntung dengan beberapa hal di atas,

Ini adalah satu-satunya yang benar-benar bekerja untuk saya

ul:not(:first-of-type) {}

Ini bekerja untuk saya ketika saya mencoba agar tombol pertama yang ditampilkan pada halaman tidak terpengaruh oleh opsi margin-kiri.

ini adalah opsi yang saya coba pertama tetapi tidak berhasil

ul:not(:first-child)


4

Anda dapat menggunakan pemilih Anda dengan :notseperti di bawah ini Anda dapat menggunakan pemilih mana saja di dalam:not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}

Anda dapat menggunakan :nottanpa pemilih orang tua juga.

   :not(:nth-child(2)){
        /*YOUR STYLE*/
   }

Lebih banyak contoh

any_CSS_selector:not(:first-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
    /*YOUR STYLE*/
}

0

Seperti yang saya gunakan ul:not(:first-child)adalah solusi sempurna.

div ul:not(:first-child) {
    background-color: #900;
}

Mengapa ini sempurna karena dengan menggunakan ul:not(:first-child), kita dapat menerapkan CSS pada elemen dalam. Seperti li, img, span, atag dll

Tetapi ketika digunakan solusi lain:

div ul + ul {
  background-color: #900;
}

dan

div li~li {
    color: red;
}

dan

ul:not(:first-of-type) {}

dan

div ul:nth-child(n+2) {
    background-color: #900;
}

Ini membatasi hanya ul level CSS. Misalkan kita tidak dapat menggunakan CSS lisebagai `div ul + ul li '.

Untuk elemen tingkat dalam Solusi pertama bekerja dengan sempurna.

div ul:not(:first-child) li{
        background-color: #900;
    }

dan seterusnya ...

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.