Hallo sobat program, bertemu lagi dengan saya Rizal dan masih diberikan kesempatan untuk dapat menulis artikel di website Dumet School ini. Pada pembahasan kali ini saya akan memperkenalkan salah satu fungsi pseudo class :not pada CSS. Dan dipembahasan ini saya akan berikan judul tentang Mengenal Fungsi Pseudo-Class not pada CSS.

Pseudo-Class merupakan sebuah selector CSS yang digunakan untuk mengakses bagian tertentu dalam HTML misalnya :hover, :link, dll. Nah dipembahasan ini kita akan menggunakan fungsi :not, dan fungsi :not ini merupakan sebuah fungsi tidak pada pseudo-class.

Masih bingung ya teman-teman ? oke alangkah baiknya kita langsung praktekan saja agar lebih terbayang fungsi dari :not tersebut.

Mengenal Fungsi Pseudo-Class not pada CSS.

Disini saya akan coba membuat beberapa kotak dan kemudian saya gunakan fungsi not dan hover jadi nantinya ketika dihover dan tidak dihover.

Oke langkah pertama buat folder lalu buat file html kemudian ketik kode HTML nya seperti dibawah ini :

Jika sudah, tambahkan Style CSS nya seperti pada contoh dibawah ini :

Mengenal Fungsi Pseudo-Class not pada CSS.

Pada kode CSS diatas saya membuat fungsi ketika tidak dihover akan berwarna merah dan ketika dihover akan berwarna grey. Oke ketika dijalankan makan hasilnya akan menjadi seperti pada gambar dibawah ini :

Mengenal Fungsi Pseudo-Class not pada CSS

Demo

Oke jadi seperti itulah contoh dari pembahasan kita kali ini tentang Mengenal Fungsi Pseudo-Class not pada CSS. yang kita bahas kali ini  semoga dapat sangat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

WhatsApp chat