tidak: pemilih anak pertama

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

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.

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.

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 .

div li~li {
    color: red;
}

Mendukung IE7

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) {}

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)){}

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)

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

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