Pandangan ke Pemilih Negasi CSS3 (TIDAK)

Artikel ini adalah bagian dari kami "Seri Tutorial HTML5 / CSS3" - didedikasikan untuk membantu Anda menjadi desainer dan / atau pengembang yang lebih baik. Klik disini untuk melihat lebih banyak artikel dari seri yang sama.

CSS memiliki beberapa penyeleksi yang memungkinkan Anda memilih elemen dalam kondisi tertentu seperti : melayang, :fokus, :aktif, dll. Namun hari ini kita tidak akan membahas pemilih tersebut. Kami akan melihat satu yang masih sedikit dikenal metode tetapi digunakan oleh sebagian besar web designer - yaitu :tidak pemilih atau juga dikenal sebagai pemilih negasi.

Apa fungsinya?

Saya yakin itu :tidak nama itu sendiri telah menjelaskan fungsinya, yang hanya akan dipilih kebalikan dari elemen atau kondisi yang ditentukan. Sebagai contoh:

Sintaks ini akan memilih elemen apa pun selain hal (ayat).

 :tidak p)

Sedangkan contoh sintaks di bawah ini akan memilih div elemen yang melakukannya tidak punya kelas abc

 div: not (.abc)

Baiklah, sekarang, mari kita coba pemilih ini dalam contoh nyata:

Pertama-tama, mari kita buat beberapa paragraf dengan beberapa tautan dari Wikipedia dan beberapa tautan dengan domain fiksi. Ini adalah markup HTML untuk paragraf.

  CSS: bukan Selector Demo
 Jujubes menerapkan wijen kancing chupa chups kue cokelat. Kue gandum marshmallow wypas kue donat donat. Chupa chups jelly cupcake, Gummi beruang. Lemon menjatuhkan kue wafer.
 Donat kue coklat Cheesecake jelly manis roll bubuk soufflÃ ?? Â ?? Ã'Â © kue coklat. Permen kapas wypas, Tetes lemon, permen kue, donat bonbon marzipan. Permen macaroon, akar manis jelly-o. Kue coklat, permen gulung manis marshmallow dragÃ ?? Â ?? Ã'Â © e permen kapas brownies marshmallow.
 Puding topping cakar beruang marshmallow. Pie muffin pastry gummies kue buah brownies jelly gingerbread wijen bentak. Permen puding cupcake beruang cakar. Kue wortel, muffin, permen kapas, tootsie, gulung muffin. Jelly bean tart dragÃ ?? Â ?? Ã'Â © e icing manis kue cokelat topping wafer. Gulung manis toffee gula guling kue prem ?? Ã'Â © e bonbon candy muffin.
 Kue marzipan kue pastry kue buah wypas. Oat cake, coklat, wypas, draga ?? Ã'Â © e gula gula wortel, kue wortel. Karamel cokelat batangan, croissant, wafer, cupcake pie, cokelat jujubes. Biskuit, biskuit, permen, tarik, ?? ?? ?? Ã'Â © e.Candy brownie, kue oat, wijen, snaps, cheesecake, bubuk, tootsie, roll, biskuit, beruang cakar. SoufflÃ ?? Â ?? Ã'Â © Gummi beruang jelly beans wijen terkunci faworki kue pencuci mulut bonbon manis.

Rencananya di sini adalah: kami hanya akan memilih tautan yang tidak mengarah ke Wikipedia dan kemudian memberi tanda seru tanda tersebut untuk memperingatkan perhatian terhadap tautan tersebut..

Pertama, kami akan menambahkan :setelah pseudo-element pada semua tautan untuk menempatkan tanda, dan kami mendefinisikannya sebagai inline-block elemen.

 a: after display: inline-block;

Kemudian, untuk memilih setiap tautan yang tidak mengarah ke Wikipedia, kami akan menggabungkan :tidak pemilih dengan pemilih atribut. Atribut selector di sini akan memilih setiap anchor tag yang diawali dengan atribut href http://en.wikipedia.org/ dan dengan menggabungkannya dengan :tidak, itu jelas akan memilih yang sebaliknya. Jadi di sini kita mulai:

 a: not ([href ^ = "http://en.wikipedia.org/"]): after background-color: # F8EEBD; perbatasan: 1px solid # EEC56D; border-radius: 3px 3px 3px 3px; warna: # B0811E; konten: "!"; ukuran font: 10pt; margin-kiri: 5px; padding: 1px 6px; posisi: relatif;

Berhasil! Tag anchor yang tidak mengarah ke Wikipedia sekarang memiliki tanda seru.

Bug Chrome

Jika Anda melihat ini di Chrome, Anda akan melihat bahwa efek yang diberikan tidak seperti di atas. Semua tautan tampaknya memiliki tanda seru terlepas dari URL.

Kasus ini sebenarnya telah diatasi sebagai bug. Jadi, untuk memperbaiki bug ini, kita perlu menambahkan aturan ini.

 a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / display: inline-block;

Dan sekarang masalahnya seharusnya sudah diperbaiki.

Demo

Kesimpulan

Dalam beberapa keadaan menggunakan :tidak pemilih benar-benar pilihan paling efektif, seperti contoh di atas, di mana kita dapat memilih beberapa elemen acak bahkan tanpa menambahkan kelas yang tidak perlu, atau penambahan markup ke dokumen.

Anda sebenarnya dapat membangun efek yang lebih baik dengan memanfaatkan pemilih ini, dan ini adalah salah satu contoh: Fungsi Filter dengan CSS3