Pada video ini kita akan mempelajari mengenai cara menggunakan Pseudo Class. Pseudo Class ini digunakan untuk memilih elemen dalam kondisi tertentu. Sebagai contoh, yang paling sering digunakan adalah dalam kondisi hover, yaitu kondisi dimana pengunjung meletakkan kursor mouse tepat diatas elemen yang kita pilih. Untuk menggunakan pseudo class, pertama kita harus menuliskan dahulu simbol titik dua, setelah itu barulah diikuti dengan kata kunci dari pseudo classnya.

Berikut adalah beberapa contoh dari pseudo class yang sering digunakan, yaitu hover, active, focus dan seterusnya. Pada sebelah kanan ada beberapa pseudo class yang berhubungan dengan posisi elemen di dalam kode HTML, seperti first-child, first-of-type, dan seterusnya. Nanti akan langsung kita praktekan pada kode latihan kita.

Kita buka kembali source code dari pelajaran sebelumnya. Pertama kita akan mencoba pseudo class yang paling umum digunakan terlebih dahulu, yaitu hover. Kita menggunakan hover untuk memberikan efek tambahan pada saat pengunjung situs kita sedang meletakkan kursor mouse tepat diatas elemen yang sedang kita tunjuk. Biasanya hover digunakan pada bagian link, untuk memberikan kesan bahwa link tersebut dapat di klik. Hover juga sering digunakan pada bagian data, untuk memberikan highlight atau tanda pada data yang sedang dipilih agar lebih mudah untuk dibaca.

Sebagai contoh, kita akan gunakan hover pada elemen p terlebih dahulu untuk memberikan efek highlight pada item. Kita buka kode css. Kita tambahkan selector elemen p, kemudian untuk menuliskan pseudo class pertama kita harus menggunakan tanda titik dua terlebih dahulu, barulah diikuti dengan kata hover. Kita tambahkan properti background color : lightgreen.

Kita simpan dan refresh browser. Sekarang setiap kali kita mengarahkan mouse ke atas paragraf, maka warna dari seluruh paragraf tersebut berubah menjadi warna hijau muda. Sehingga kita bisa dengan mudah membedakan paragraf yang sedang kita pilih dari paragraf lainnya. Inilah yang dimaksud dengan memberikan efek highlight pada konten.

Nah, yang perlu diingat pada saat menuliskan pseudo class ini adalah penulisannya harus langsung digabung dengan elemen yang sedang kita pilih. Sebagai contoh, apabila saya menambahkan tanda spasi sebelum titik dua, maka kode css hover yang kita buat ini sudah tidak berfungsi.

Selanjutnya kita akan mencoba efek hover ke bagian daftar atau list item. Kita ganti selector p:hover menjadi li:hover. Kita simpan dan refresh browser. Lalu kita lihat ke bagian Daftar Menu Restoran.

Bisa dilihat disini bahwa apabila saya mengarahkan mouse ke setiap item pada daftar menu, maka browser akan memberikan warna latar belakang hijau muda. Namun disini masih ada yang kurang bagus ya, karena misalkan saya mengarahkan mouse ke Nasi Ayam Bakar, namun bagian Paket dan Makanan ikut berubah menjadi berwarna hijau.

Apabila kita lihat pada kode HTML, hal ini disebabkan karena kita menggunakan list bertingkat. Elemen li dengan konten Nasi Ayam Bakar berada di dalam elemen li dengan konten Paket, dan berada di dalam elemen li dengan konten Makanan. Oleh karena itu pada saat saya mengarahkan mouse ke li Nasi Ayam Bakar, maka li Paket dan li Makanan ikut terpilih.

Apabila kita ingin agar efek highlight ini hanya terjadi pada menu makanan saja, maka kita bisa menggabungkan pseudo class dengan descendant selector. Kita dapat memilih li tingkat ketiga dengan cara menuliskan li spasi li spasi li, dan diikuti dengan psedo class hover. Kita simpan dan lihat hasilnya pada browser. Sekarang efek hightlight hanya bisa terjadi apabila kita sedang mengarahkan mouse ke atas menu restoran. Sedangkan apabila kita mengarahkan mouse ke bagian kategori atau sub kategori menu, maka tidak terjadi apa-apa.

Selanjutnya kita akan belajar untuk memberikan efek pada link, apabila mouse diarahkan ke atas link tersebut. Biasanya efek yang digunakan adalah memberikan garis bawah pada konten link. Kita lihat kembali ke kode CSS. Kita tambahkan selector a:hover. Lalu untuk memberikan garis bawah, seperti yang telah kita pelajari pada video sebelumnya, kita menggunakan properti text-decoration: underline.

Kita simpan dan refresh browser. Kita lihat kedua link yang berada pada paragraf pertama. Awalnya tidak ada garis bawah ya. Dan apabila saya arahkan mouse ke atas link, maka browser akan menambahkan garis bawah pada link tersebut.

Perhatikan disini bahwa secara default, browser menggunakan 2 buah warna pada link. Apabila link masih belum pernah dikunjungi, maka browser akan menggunakan warna biru muda. Sedangkan apabila link sudah pernah dikunjungi, maka browser akan menggunakan warna biru tua. Disini ada beberapa pseudo class yang sering digunakan, yaitu pseudo class link untuk mengubah properti link yang belum pernah dikunjungi. Pseudo class visited untuk mengubah link yang sudah pernah dikunjungi. Dan pseudo class any-link untuk mengubah link baik yang sudah pernah dikunjungi maupun yang belum.

Sebagai contoh, kita tambahkan selector baru a:link. Lalu kita beri properti color:red. Kita simpan dan refresh browser. Perhatikan di browser bahwa link pertama yang tadinya berwarna biru muda berubah menjadi merah. Dan sekarang link yang kedua akan berubah menjadi berwarna biru tua tidak berubah. Karena dengan menggunakan pseudo class link, kita hanya memilih link yang belum pernah dikunjungi saja.

Kita ubah pseudo class link menjadi visited. Simpan dan refresh browser. Sekarang yang berubah warna hanya link kedua, sedangkan link pertama warnanya tetap biru muda. Karena pseudo class visited hanya memilih link yang sudah pernah dikunjungi saja.

Untuk mengubah warna kedua link, kita bisa menggunakan pseudo class any-link. Misalkan kita ubah pseudo classnya menjadi any-link dan refresh browser. Sekarang kedua link sudah berwarna merah. Atau bisa juga dengan cara yang lebih sederhana, yaitu tidak menggunakan pseudo class sama sekali. Jadi kita hapus saja :any-link, dan semua link akan berubah menjadi berwarna merah.

Sekarang kita akan mencoba beberapa pseudo class untuk elemen input. Yang pertama kita akan mencoba pseudo class hover. Kita tambahkan selector baru input:hover, dan kita berikan properti background-color: lightgreen. Kita simpan.

Kita lihat pada browser, pada bagian paling bawah saya telah membuatkan formulir pendaftaran. Sebelum di refresh, apabila mouse saya arahkan ke textbox dan button, maka warnanya tetap sama ya. Kita refresh. Dan sekarang apabila mouse diarahkan ke atas textbox, maka warnanya akan berubah menjadi hijau. Termasuk tombol Daftar ya. Karena apabila kita melihat pada kode HTML, tombol daftar ini dibuat dengan menggunakan elemen input. Apabila tombol Daftar dibuat menggunakan elemen Button, maka tombol tidak ikut berubah.

Pseudo class berikutnya yang bisa kita coba adalah active. Pseudo class ini akan dijalankan pada saat input sedang diklik. Sebagai contoh, kita tambahkan selector baru input:active. Dan kita berikan properti background-color:pink.

Kita simpan dan refresh browser. Perhatikan pada textbox sekarang berwarna putih. Pada saat saya mengarahkan mouse ke atas textbox, maka akan berubah menjadi hijau karena pseudo class hover. Pada saat saya klik, maka akan berubah warna menjadi pink karena pseudo class active. Hal yang sama juga terjadi pada tombol Daftar.

Pseudo class berikutnya yang berhubungan dengan input adalah focus. Perhatikan apabila saya mengarahkan mouse ke textbox Nama, dan saya klik. Maka textbox nama akan mendapatkan fokus. Efek default yang diberikan oleh browser adalah border dari textbox focus menjadi sedikit lebih tebal, bisa kita bandingkan dengan textbox Email ya. Jangan dibandingkan dengan password karena css password sudah kita ubah pada video sebelumnya.

Efek dari textbox yang menerima fokus bisa kita atur menggunakan pseudo class focus. Sebagai contoh, kita tambahkan selector baru input:focus. Dan kita berikan warna background-color: lightblue.

Kita simpan dan refresh browser. Sekarang perhatikan apabila saya klik, maka textbox akan berubah menjadi berwarna biru. Perhatikan juga bahwa pada saat kita mengklik textbox, maka otomatis textbox tersebut mendapatkan focus, dan pseudo class focus ini akan menghapus efek dari pseudo class active. Jadi sekarang sudah tidak ada perubahan warna ke pink.

Dan apabila kita tes ke tombol Daftar, maka kita akan mendapatkan perubahan warna yang sama seperti textbox.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.