BELAJAR CSS PSEUDO CLASSES
BELAJAR CSS PSEUDO CLASSES – Sekarang mari kita belajar menggunakan css :link, :visited, :hover, :active. Tentunya bagi para blogger setidaknya pasti pernah melihat css pseudo classes tersebut. Baik itu di template blogspot, script widget, maupun javascript. Fungsi dari css pseudo classes tersebut sendiri berguna untuk menambahkan spesial efek pada element class css.
 |
| css pseudo classes |
LIST CSS PSEUDO CLASSES
Berikut ini list css pseudo classes :
| Selector | Example | Example description |
|---|---|---|
| :link | a:link | Memberikan efek pada link |
| :visited | li:visited | Memberikan efek pada element list yang sudah pernah dikunjungi |
| :active | li:active | Memberikan efek pada list menu yang sedang aktif dibuka |
| :hover | a:hover / li:hover | Memberikan efek pada link atau list ketika mouse over |
| :focus | input:focus | Memilih element input yang memiliki fokus |
| :first-letter | p:first-letter | Memilih setiap elemet huruf pertama setiap tag <p> |
| :first-line | p:first-line | Memilih / memberikan efek pada baris pertama setiap <p> |
| :first-child | p:first-child | Memilih setiap first child element <p> dari parent element |
| :before | p:before / div:before | Memasukan sesuatu content sebelum element <p> / <div> |
| :after | p:after / div:after | Memasukan sesuatu content setelah element <p> / <div> |
| :lang(language) | p:lang(it) | Memilih setiap elemet <p> yang memiliki atribut lang value “it” |
Kita bisa menggunakan css ini untuk memperindah dan mempercantik tampilan blog atau website yang kita miliki. Contohnya memberikan efek berganti warna pada link ketika mouse diarahkan pada link tersebut ataupun ketika link tersebut sudah pernah dikunjungi.
Css pseudo classes ini juga bisa digunakan pada element class div, li, dan p. Kita bisa memasukan efek tertentu untuk merubah tampilan element div atau li sehingga lebih menarik.
Contohnya saya ingin membuat semua link yang ada pada div class cobacoba menjadi warna merah maka cssnya sebagai berikut ini
.cobacoba a {color:red;}
agar lebih bagus ditambahkan width, display blok, margin,padding, background color dan border radius, sehingga element css diatas menjadi
.cobacoba a {
width:300px;
float: left;
display: block;
margin: 5px 20px 5px 0px;
height: 24px;
line-height: 24px;
color: red;
background: #313131;
border-radius:5px;
padding: 1px 10px;
}
Untuk memberikan efek ketika mouse diarahkan ke link tersebut kita menggunakan pseudo class :hover, sebagai contoh kita akan menggantinya backgoundnya menjadi warna putih maka tambahkan
.cobacoba a:hover {
background: white;
}
Dan tuntuk menandai bahwa link tersebut sudah pernah dikunjungi saya akan merubah backgroundnya menjadi biru maka tambahkan css
.cobacoba a:visited {
background: blue;
}
Kamu juga bisa menambahkan background image pada element :hover biar tampilannya lebih mewah
.cobacoba a:hover {
background: url(http://2.bp.blogspot.com/-GMEMv-MRAVw/T3sFN0qGHfI/AAAAAAAAALs/AQ2JNSRfvps/s1600/sidebar-bg.png) repeat-x top;
background: white; //background dasar
}
Cobalah mengganti :hover dengan :visited untuk menambahkan efek pada link yang sudah dikunjungi dan masih banyak pseudo classes lainnya.
Demikian tutorial singkat BELAJAR CSS PSEUDO CLASSES semoga bisa bermanfaat sumber artikel didapat dari w3schools
