Apakah ada CSS tidak sama dengan pemilih?

116

Apakah ada sesuatu seperti! = (Tidak sama) di CSS? misalnya, saya memiliki kode berikut:

input {
 ... 
 ...
}

tetapi untuk beberapa masukan, saya perlu membatalkan ini. Saya ingin melakukannya dengan menambahkan kelas "reset" ke tag masukan, misalnya

<input class="reset" ... />

lalu lewati tag ini dari CSS.

Bagaimana saya bisa melakukan itu?

Satu-satunya cara yang bisa saya lihat adalah dengan menambahkan beberapa kelas ke tag input, dan menulis ulang CSS sebagai berikut:

input.mod {
 ...
 ...
}
html css css-selectors Alex Ivasyuv
sumber
Anda menjawab pertanyaan Anda, saya pikir. Letakkan gaya di input.mod dan tambahkan kelas 'mod' di tag masukan yang diinginkan.
Nazmul

Jawaban:

157

Di CSS3, Anda dapat menggunakan :not()filter, tetapi belum semua browser mendukung CSS3 sepenuhnya, jadi pastikan Anda tahu apa yang Anda lakukan yang sekarang didukung oleh semua browser utama (dan sudah cukup lama; ini adalah jawaban lama. ...).

Contoh:

<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />

dan CSS

input:not(.avoidme) { background-color: green; }

Catatan: solusi ini seharusnya tidak diperlukan lagi; Saya tinggalkan di sini untuk konteks.

Jika Anda tidak ingin menggunakan CSS3, Anda dapat menyetel gaya pada semua elemen, lalu menyetel ulang dengan kelas.

input { background-color: green; }
input.avoidme { background-color: white; }
Tomas Aschan
sumber
OMG ... Saya tahu itu ada :) Ya, benar! Terima kasih.
Alex Ivasyuv
2
Dukungan kurang terutama dari IE8 (dan rilis yang lebih lama). Jika ada yang tertarik dengan polyfill: selectivizr.com
franzlorenzon
1
@Guru: Anda dapat merangkai beberapa :not()penyeleksi: input:not(.avoidme):not(.avoidmetoo)akan menghindari elemen dengan salah satu kelas, input:not(.avoidme.andme)akan menghindari elemen dengan kedua kelas.
Tomas Aschan
1
@TomasLycken, sebenarnya, menggunakan beberapa penyeleksi adalah satu rumit di CSS, misalnya :not(.this.that) { }MEI pekerjaan, tetapi jika Anda melakukan sesuatu seperti :not(.this, .that) { }Anda akan jatuh ke bawah, Anda harus rantai daisy mereka seperti: :not(.this):not(.that). Saya mengerti Anda mungkin tahu ini, saya mencoba membantu pembaca di masa mendatang :)
Can O 'Spam
1
Meninggalkan komentar di sini untuk pembaca mendatang: Komentar @SamSwift 웃 masih akurat, tetapi dukungan untuk daftar (mungkin) akan datang di masa mendatang . Untuk saat ini, hanya selektor tunggal yang didukung di dalam :not().
Tomas Aschan
24

Anda juga dapat melakukannya dengan 'mengembalikan' perubahan pada kelas reset hanya di CSS.

INPUT { 
    padding: 0px;
}
INPUT.reset {
    padding: 4px;
}
AvatarKava
sumber
8

CSS3 memiliki :not(), tetapi belum diterapkan di semua browser. Namun, ini diterapkan di Pratinjau Platform IE9.

input:not(.reset) { }

http://www.w3.org/TR/css3-selectors/#negation

Sementara itu, Anda harus tetap berpegang pada metode kuno.

Andy E
sumber
6

Anda juga dapat melakukan pendekatan ini dengan menargetkan atribut seperti ini:

input:not([type=checkbox]){ width:100%; }

Dalam hal ini semua input yang bukan tipe 'kotak centang' akan memiliki lebar 100%.

Dylan Auty
sumber
4

Menarik, baru saja mencoba ini untuk memilih elemen DOM menggunakan JQuery dan berhasil! :)

$("input[class!='bad_class']");

Halaman ini memiliki 168 div yang tidak memiliki kelas 'copy-komentar'

$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168
Naveed
sumber
11
[attr!="value"]adalah pemilih hanya jQuery api.jquery.com/attribute-not-equal-selector
xec
Apa hubungannya ini dengan CSS?
Devlin carnate
@evlate "CSS" pemilih telah berdarah ke JS ( sekitar 2013 ) sehingga orang-orang mencarinya.
Nick T
0

alih-alih class = "reset" Anda bisa membalikkan logika dengan memiliki class = "valid" Anda dapat menambahkan ini secara default dan menghapus kelas untuk menyetel ulang gaya.

Jadi dari teladanmu dan Tomas '

input.valid {
 ... 
 ...
}

dan 

<input type="text" value="will be matched" class="valid"/>
<input type="text" value="will not be matched" />
<input type="text" value="will be matched" class="valid"/>
Qazzian
sumber
2
Saya pikir seluruh gagasan untuk dapat "mengatur ulang" dengan menerapkan ke kelas adalah bahwa jumlah elemen yang seharusnya tidak memiliki gaya default jauh melebihi yang seharusnya, jadi OP tidak ingin menerapkan kelas apa pun ke mayoritas elemen.
Tomas Aschan