Bisakah: not () pseudo-class memiliki beberapa argumen?

746

Saya mencoba memilih inputelemen dari semua typekecuali radiodan checkbox.

Banyak orang telah menunjukkan bahwa Anda dapat memasukkan banyak argumen :not, tetapi menggunakan typesepertinya tidak berhasil saya coba.

form input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

Ada ide?

css css-selectors

— delphi
sumber

24

"Banyak orang telah menunjukkan bahwa Anda dapat mengajukan banyak argumen: tidak" Entah orang-orang itu mengutip artikel tertentu yang dirujuk secara populer tetapi sangat menyesatkan, atau mereka berbicara tentang jQuery, bukan CSS. Perhatikan bahwa pemilih yang diberikan sebenarnya valid di jQuery, tetapi tidak di CSS. Saya menulis T&J yang merinci perbedaan: stackoverflow.com/questions/10711730/… (jawabannya juga menyebutkan artikel di samping)

— BoltClock

10

Selamat! Anda telah berhasil menulis CSS4.0 yang valid dalam contoh Anda di atas 2 tahun sebelum edisi resmi keluar.

— Jack Giffin

1

@Jack Giffin: "Edisi resmi" apa yang Anda maksud? Pertanyaan ini hanya mendahului FPWD penyeleksi-4 pada 5 bulan, dan speknya masih jauh dari selesai: w3.org/TR/2011/WD-selectors4-20110929/#negation Dan pra-tanggal implementasi pertama oleh 4 setengah tahun : stackoverflow.com/questions/35993727/…

— BoltClock

1537

Mengapa: tidak hanya menggunakan dua :not:

input:not([type="radio"]):not([type="checkbox"])

_{Ya, itu disengaja}

— Felix Kling
sumber

4

Ini memiliki kekhususan yang tinggi.

— Undistraction

63

Bagi mereka yang tidak mendapatkan humor: dia berkata "Kenapa tidak ..." dengan :karakter.

— totymedli

11

Sebagai catatan tambahan, jika Anda melakukan sesuatu seperti input:not('.c1'), input:not('c2')Anda berakhir dengan situasi "dan" di mana kedua kelas harus berada di input agar cocok.

— Cloudkiller

3

@BoltClock Tertunda, tetapi, karenanya keinginan untuk :not([attr],[attr])format CSV juga :-P

— TylerH

3

@Cloudkiller tidak ada yang akan memilih elemen input apa pun -> "input tanpa kelas c1 ATAU input tanpa kelas c2"

— David Callanan

48

Jika Anda menggunakan SASS dalam proyek Anda, saya telah membuat mixin ini agar berfungsi seperti yang kita semua inginkan:

@mixin not($ignorList...) {
    //if only a single value given
    @if (length($ignorList) == 1){
        //it is probably a list variable so set ignore list to the variable
        $ignorList: nth($ignorList,1);
    }
    //set up an empty $notOutput variable
    $notOutput: '';
    //for each item in the list
    @each $not in $ignorList {
        //generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
        $notOutput: $notOutput + ':not(#{$not})';
    }
    //output the full :not() rule including all ignored items
    &#{$notOutput} {
        @content;
    }
}

dapat digunakan dalam 2 cara:

Opsi 1: daftarkan item yang diabaikan sebaris

input {
  /*non-ignored styling goes here*/
  @include not('[type="radio"]','[type="checkbox"]'){
    /*ignored styling goes here*/
  }
}

Opsi 2: daftar item yang diabaikan dalam variabel terlebih dahulu

$ignoredItems:
  '[type="radio"]',
  '[type="checkbox"]'
;

input {
  /*non-ignored styling goes here*/
  @include not($ignoredItems){
    /*ignored styling goes here*/
  }
}

CSS yang dihasilkan untuk opsi mana pun

input {
    /*non-ignored styling goes here*/
}

input:not([type="radio"]):not([type="checkbox"]) {
    /*ignored styling goes here*/
}

— Daniel Tonon
sumber

6

bukankah itu seperti meminta penebang kayu untuk pergi ke toko perangkat keras alih-alih mengambil kayunya?

— osirisgothra

Apa? jadi kamu lebih suka menulis .selector: not (.one): not (.two): not (.tree): not (.four) {...} daripada .selector {@include not ('. one', ' .two ','. three ','. four ') {...}}?

— Daniel Tonon

2

Dalam hal efisiensi: ya. 'Karakternya lebih sedikit dan kode imo lebih efisien.

— Daan

:not()= 6 karakter per item; '',= 3 karakter per item. @includeharus ditugaskan ke hot key jadi saya akan menghitungnya sebagai satu karakter (dalam hal mengetiknya). Secara teknis saya tidak berpikir Anda bahkan perlu menggunakan tanda kutip tunggal dalam daftar jika Anda sangat membenci mereka. Mereka memang membantu mencegah editor dari panik. Berdasarkan hal itu, saya masih berpikir cara saya adalah cara mengetik yang lebih efisien dan efisien.

— Daniel Tonon

2

@DaanHeskes juga yang menuliskan semua kasus: not () tidak memungkinkan Anda untuk menggunakan variabel untuk mendaftar mereka.

— plong0

30

Mulai dari CSS Selectors 4 menggunakan banyak argumen di :notpemilih menjadi mungkin ( lihat di sini ).

Di CSS3, argumen: not selector hanya mengizinkan 1 pemilih sebagai argumen. Di penyeleksi level 4, dapat menggunakan daftar pemilih sebagai argumen.

Contoh:

/* In this example, all p elements will be red, except for 
   the first child and the ones with the class special. */

p:not(:first-child, .special) {
  color: red;
}

Sayangnya, dukungan browser terbatas . Untuk saat ini, ini hanya berfungsi di Safari.

— Pieter Meiresone
sumber

3

menurut caniuse.com , itu masih hanya didukung oleh Safari

— slanden

8

Ingat pemilih CSS-nya Level 4, bukan CSS 4, tidak ada yang namanya CSS 4 dan mungkin tidak akan pernah ada.

— Edu Ruiz

8

Saya mengalami masalah dengan ini, dan metode "X: not (): not ()" tidak berfungsi untuk saya.

Saya akhirnya menggunakan strategi ini:

INPUT {
    /* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
    /* styles that reset previous styles */
}

Ini hampir tidak menyenangkan, tetapi berhasil bagi saya ketika: tidak () bersikap garang. Ini tidak ideal, tetapi solid.

— makanCasserole
sumber

5

Jika Anda memasang plugin "cssnext" Post CSS , maka Anda dapat dengan aman mulai menggunakan sintaks yang ingin Anda gunakan sekarang.

Menggunakan cssnext akan mengubah ini:

input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

Ke dalam ini:

input:not([type="radio"]):not([type="checkbox"]) {
  /* css here */
}

http://cssnext.io/features/#not-pseudo-class

— Daniel Tonon
sumber