Fungsi :not Pada CSS


InoriDesign - CSS adalah sebuah script style yang memiliki peran penting dalam pembuatan web / blog. Semua kode kode CSS memiliki arti dan fungsi, dan pada postingan kali ini saya akan membuatkan tutorial dan tips untuk menggunakan kode :not yang ada pada CSS.

Penjelasan mengenai :not :

:not adalah sebuah kode yang memiliki fungsi sebagai pengecualian. Pengecualian berarti kode yang anda kaitkan dalam :not tidak akan terpengaruh terhadap kode css yang lain.

Contoh :

Kode CSS :

.inoridesign :not(:first-child){display:none;}

Kode HTML :

<ul class="inoridesign">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>

Hasilnya akan seperti berikut :

  • Menu 1
  • Menu 2
  • Menu 3
  • Menu 4

Arti contoh di atas adalah kode pertama dalam li tidak akan berpengaruh terhadap kode css "display:none;" . Karena fungsi :not.


Contoh ke 2 :

Kode CSS :

.inorichan {color:#001AFF;}
.inorichan :not(li) {color:#111;font-weight:600;}

Kode HTML :

<div class="inorichan">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 4</li>
InoriDesign tempat tutorial.
</div>

Hasilnya akan seperti berikut :
  • Menu 1
  • Menu 2
  • Menu 4
InoriDesign tempat tutorial.

Untuk contoh di atas berarti semua yang terdapat didalam tag <div class="inorichan"> semua tulisan akan berubah menjadi biru kecuali yang terbungkus li , karena :not(li) .