Pada tutorial kali ini kita akan belajar tentang fungsi pseudo class :not().
Mungkin teman-teman sudah pernah mendengar tentang pseudo class, kali ini kita akan bahas salah satu pseudo class yaitu :not(), fungsi pseudo class :not() ialah untuk mendefinisikan suatu element agar tidak mengikuti style yang sudah kita atur sebelumnya.
mungkin untuk lebih jelasnya kita langsung saja praktekan, silahkan teman-teman buat sebuah file lalu ketikan script html berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <p>Dumet school</p> <span>Dumet school</span> </body> </html> |
Saya membuat sebuah element p dan span pada bagian body, sekarang kita atur cssnya, silahkan teman-teman ketikan script berikut ini:
|
1 2 3 4 |
<style> p{color:red} body *:not(p){color:green} </style> |
script di atas menjelaskan bahwa style dari element p berwarna merah, lalu saya membuat sebuah selector body *:not(p) yang berarti semua element yang ada di dalam body yang buakan p berwarna hijau, jika sudah save dan coba teman-teman jalankan pada browser.
Hasilnya akan seperti berikut ini:
gimana? mudah bukan..oke teman-teman selamat mencoba, cukup sekian dulu tutorial kali ini tentang fungsi-pseudo-class-not-1, sampai bertemu pada tutorial selenjutnya, terimakasih.