Belajar CSS Part 13 Pseudo Class
PENGERTIAN
Pseudo Class merupakan sebuah properti yang berada di dalam CSS yang memiliki fungsi untuk menentukan keadaan khusus dari suatu unsur. Properti ini contoh penggunaanya sebagai berikut.
- Memeberikan efek kepada elemen ketika mouse berada di atasnya.
- Memberikan efek saat dikunjungi dan sebelum dikunjungi berbeda.
- Memeberika efek pada elemen ketika sedang fokus.
Syntaks Pseudo Class sebagai berikut.
selector:pseudo-class { property:value;}
LATAR BELAKANG
Dengan properti ini diharapkan dapat memberikan efek gaya kepada sebuah elemen.
Dengan properti ini diharapkan dapat memberikan efek gaya kepada sebuah elemen.
MAKSUD & TUJUAN
- Memberikan efek hover pada sebuah elemen.
- Membuat elemen menjadi lebih hidup.
ALAT & BAHAN
- Text Editor
- Browser
- Laptop/PC
LANGKAH KERJA
Di dalam properti ini terdapat berbagai cara penggunaannya. Disini kami akan menjelaskan cara pneggunaan properti tersebut.
- Anchor Pseudo-classes
Yang pertama adalah properti Anchor Pseudo-classes. Properti ini berfungsi memberikan efek berupa saat hover, saat dikunjungi, sebelum dikunjungi, dan setelah dikunjungi. Cara penggunaanya sebagai berikut.
Contoh :
NB :
a:hover HARUS digunakan setelah a:link dan a:visited ! Dalam definisi CSS agar efektif a:active HARUS digunakan setelah a:hover dalam definisi CSS agar efektif! nama pseudo-class tidak case-sensitive.
Hasilnya akan terlihat jika anda mengarahkan mouse ke atas link.
- Pseudo-classes and CSS Classes
Properti ini berfungsi untuk menghubungkan Pseudo-class dengan CSS-Classes. Maksudnya kita dapat memanggil kelas di dalam CSS dengan properti pseudo class. Properti ini memungkinkan kita untuk mempermudah dalam memasukkan pseudo class ke dalam elemen.
Contoh :
Pertama kita harus membuat properti class terlebih dahulu di dalam CSS. Kemudian kita panggil properti tersebut dengan selektor class.
Hasilnya akan terlihat jika mouse di arahkan pada link yang menggunakan CSS class.
Hover on <div>
Properti ini berfungsi memberikan efek hover di dalam tag <div>.
Contoh :
Memberikan efek hover pada tag <div>.
Hasilnya akan terlihat saat mouse di arahkan pada div.
- The :first-child Pseudo-class
Properti ini berfungsi memberikan efek pada elemen dengan keturunan anak pertama. Jadi efek hover ini hanya berfungsi pada keturunan pertama saja, selain itu tidak berfungsi.
Contoh :
Syntaksnya penggunaan untuk keturunan pertama.
Untuk hasilnya hanya berguna bagi anak pertama dari elemen itu. Selain itu tidak akan berfungsi.
Mungkin itu saja dari saja, Kurang lebihnya mohon maaf.
Semoga bermanfaat.
Syukron ^^
Wassalamualaikum Wr. Wb.
No comments:
Post a Comment