Bisakah saya menulis elemen pemilihan pemilih CSS TIDAK memiliki kelas atau atribut tertentu?

646

Saya ingin menulis aturan pemilih CSS yang memilih semua elemen itu tidak memiliki kelas tertentu. Misalnya, diberikan HTML berikut:

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>

Saya ingin menulis pemilih yang memilih semua elemen yang tidak memiliki kelas "cetak" yang, dalam hal ini, adalah nav dan sebuah elemen.

Apakah ini mungkin?

CATATAN: dalam HTML aktual di mana saya ingin menggunakan ini, akan ada lebih banyak elemen yang tidak memiliki kelas "yang dapat dicetak" daripada yang dilakukan (saya sadar itu sebaliknya dalam contoh di atas).

html css css-selectors David Nordvall
sumber

Jawaban:

900

Biasanya Anda menambahkan pemilih kelas ke :not()pseudo-class seperti:

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

Tapi jika Anda membutuhkan dukungan browser yang lebih baik (IE8 dan lebih tua tidak mendukung :not()), Anda mungkin lebih baik membuat aturan gaya untuk elemen yang melakukan memiliki "dicetak" kelas. Jika itu tidak layak terlepas dari apa yang Anda katakan tentang markup Anda yang sebenarnya, Anda mungkin harus mengerjakan markup Anda di sekitar batasan itu.

Perlu diingat bahwa, tergantung pada sifat Anda pengaturan berada di aturan ini, beberapa dari mereka mungkin baik diwariskan oleh keturunan yang berada .printable , atau mempengaruhi mereka satu atau lain cara. Misalnya, meskipun displaytidak diwarisi, pengaturan display: nonepada :not(.printable)akan mencegahnya dan semua turunannya tidak ditampilkan, karena menghapus elemen dan subtree dari tata letak sepenuhnya. Anda sering dapat menyiasatinya dengan menggunakan visibility: hiddengantinya yang akan memungkinkan keturunan terlihat untuk ditampilkan, tetapi elemen tersembunyi masih akan mempengaruhi tata letak seperti yang mereka lakukan sebelumnya. Singkatnya, berhati-hatilah.

BoltClock
sumber
4
Sebagai sedikit info, dukungan peramban untuk aspek media-agnostik CSS seringkali sama di semua jenis media - jika peramban tidak mendukung :not()di layar, ia juga tidak akan mendukungnya dalam bentuk cetak.
BoltClock
19
Perhatikan bahwa :not()hanya membutuhkan pemilih sederhana yang artinya tidak dapat berisi pemilih yang disarangkan seperti :not(div .printable)- lihat sintaks Selektor W3C
Steve Eynon
1
Saya hanya mencobanya untuk .active a: not (.active a) tidak bekerja untuk saya. Tapi, a: not (.active) berhasil!
user2367418
Ketika Anda mengatakan itu tidak bekerja untuk Anda, Anda mungkin berarti itu tidak bekerja untuk Anda , bukan? Itu tidak berarti itu tidak bekerja, itu mungkin adalah kasus kekhususan - properti dalam :not(.active)aturan Anda mungkin hanya ditimpa oleh properti dalam aturan dengan prioritas lebih tinggi.
amn
1
@ Silves: Apakah Anda yakin tentang itu? Kekhususan :not()adalah argumennya, yang artinya :not(div)sama spesifik untuk div, :not(.cls)untuk .clsdan :not(#id)untuk #id.
BoltClock
180 
:not([class])

Sebenarnya, ini akan memilih apa pun yang tidak memiliki kelas css ( class="css-selector") diterapkan untuk itu.

Saya membuat demo jsfiddle

    h2 {color:#fff}
    :not([class]) {color:red;background-color:blue}
    .fake-class {color:green}
    <h2 class="fake-class">fake-class will be green</h2>
    <h2 class="">empty class SHOULD be white</h2>
    <h2>no class should be red</h2>
    <h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
    <h2 class="">empty class2 SHOULD be white</h2>
    <h2>no class2 SHOULD be red</h2>
Luaskan cuplikan

Apakah ini didukung? Ya: Caniuse.com (diakses 02 Jan 2020) :

  • Dukungan: 98,74%
  • Dukungan sebagian: 0,1%
  • Total: 98,84%

Edit lucu, saya Googling untuk kebalikan dari: tidak. Negasi CSS?

selector[class]  /* the oposite of :not[]*/
Milche Patern
sumber
109

Kelas :notpseudo negasi

CSS negasi pseudo-class,, :not(X)adalah notasi fungsional yang mengambil pemilih X sederhana sebagai argumen. Ini cocok dengan elemen yang tidak diwakili oleh argumen. X tidak boleh mengandung pemilih negasi lain.

Anda dapat menggunakan :notuntuk mengecualikan subset dari elemen yang cocok, dipesan seperti yang Anda lakukan pemilih CSS normal.

Contoh sederhana: tidak termasuk kelas

div:not(.class)

Akan memilih semua divelemen tanpa kelas.class

div:not(.class) {
  color: red;
}
<div>Make me red!</div>
<div class="class">...but not me...</div>
Luaskan cuplikan

Contoh kompleks: tidak termasuk menurut jenis / hierarki

:not(div) > div

Akan memilih semua divelemen yang bukan anak dari yang laindiv

div {
  color: black
}
:not(div) > div {
  color: red;
}
<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>
Luaskan cuplikan

Contoh kompleks: rantai pemilih semu

Dengan pengecualian penting karena tidak dapat memilah / menyeleksi :notselektor dan elemen semu, Anda dapat menggunakan bersama dengan selektor semu lainnya.

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}
<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>
Luaskan cuplikan

Dukungan Browser , dll.

:notadalah pemilih level CSS3 , pengecualian utama dalam hal dukungan adalah IE9 +

Spek juga membuat poin yang menarik:

yang :not()semu memungkinkan pemilih tidak berguna untuk ditulis. Misalnya :not(*|*), yang tidak mewakili elemen sama sekali, atau foo:not(bar), yang setara dengan footetapi dengan spesifisitas yang lebih tinggi.

SW4
sumber
3
Itu adalah makan malam jawaban yang terdokumentasi dengan baik dan diperlihatkan dengan baik! #thumbsup
Jonathan Bredo Christensen
Oke, teladan Anda hanya :not(div) > divakan bekerja dengan orang tua langsung. Bagaimana dengan kakek lain?
FindOut_Quran
Info luar biasa! Apa yang saya butuhkan! Terima kasih!
Jamie
9

Hanya ingin berkontribusi bahwa jawaban di atas: tidak () bisa sangat efektif dalam bentuk sudut, daripada menciptakan efek atau menyesuaikan tampilan / DOM, 

input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}

Pastikan bahwa saat memuat halaman Anda, bidang input hanya akan menampilkan yang tidak valid (batas merah atau latar belakang, dll) jika mereka memiliki data yang ditambahkan (yaitu tidak lagi asli) tetapi tidak valid.

BaneStar007
sumber
7

Contoh

  [class*='section-']:not(.section-name) {
    @include opacity(0.6);
    // Write your css code here
  }

// Opacity 0,6 semua "bagian-" tetapi tidak "bagian-nama"

Hakan
sumber
2

Kamu bisa menggunakan :not(.class) pemilih seperti yang disebutkan sebelumnya.

Jika Anda peduli dengan kompatibilitas Internet explorer, saya sarankan Anda menggunakan http://selectivizr.com/ .

Tapi ingat untuk menjalankannya di bawah apache kalau tidak Anda tidak akan melihat efeknya.

MelkorNemesis
sumber
3
Apa maksud Anda menjalankannya di bawah apache? Selectivizr adalah front end lib, tidak ada hubungannya dengan perangkat lunak server
Kloar
Itu melakukan permintaan ajax - yang tidak bekerja tanpa server http.
MelkorNemesis
2

Menggunakan :not() kelas pseudo:

Untuk memilih semuanya kecuali elemen tertentu (atau elemen). Kita bisa menggunakan :not() pseudo class CSS . Kelas :not()pseudo membutuhkan aCSS pemilih sebagai argumennya. Pemilih akan menerapkan gaya ke semua elemen kecuali untuk elemen yang ditentukan sebagai argumen.

Contoh:

/* This query selects All div elements except for   */
div:not(.foo) {
  background-color: red;
}


/* Selects all hovered nav elements inside section element except
   for the nav elements which have the ID foo*/
section nav:hover:not(#foo) {
  background-color: red;
}


/* selects all li elements inside an ul which are not odd */
ul li:not(:nth-child(odd)) { 
  color: red;
}
<div>test</div>
<div class="foo">test</div>

<br>

<section>
  <nav id="foo">test</nav>
  <nav>Hover me!!!</nav>
</section>
<nav></nav>

<br>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
Luaskan cuplikan

Kita sudah dapat melihat kekuatan dari kelas semu ini, ini memungkinkan kita untuk menyelaraskan pemilih kita dengan mengecualikan elemen-elemen tertentu. Selanjutnya, kelas semu ini meningkatkan kekhususan pemilih . Sebagai contoh:

/* This selector has a higher specificity than the #foo below */
#foo:not(#bar) {
  color: red;
}

/* This selector is lower in the cascade but is overruled by the style above */
#foo {
  color: green;
}
<div id="foo">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
Luaskan cuplikan

Willem van der Veen
sumber
0

Jika Anda ingin menu kelas tertentu memiliki CSS tertentu jika kelas tidak masuk :

body:not(.logged-in) .menu  {
    display: none
}
Mihai
sumber
-1

Seperti yang orang lain katakan, Anda cukup cantumkan: not (.class). Untuk penyeleksi CSS, saya sarankan mengunjungi tautan ini, sudah sangat membantu sepanjang perjalanan saya: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

div:not(.success) {
  color: red;
}

Kelas pseudo negasi sangat membantu. Katakanlah saya ingin memilih semua div, kecuali yang memiliki id wadah. Cuplikan di atas akan menangani tugas itu dengan sempurna.

Atau, jika saya ingin memilih setiap elemen (tidak disarankan) kecuali untuk tag paragraf, kita dapat melakukan:

*:not(p) {
  color: green;
}
HBhering
sumber