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:

<!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:

<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:

fungsi-pseudo-class-not-1

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.