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

Leave a Reply

Your email address will not be published. Required fields are marked *

No Live Link Please! and Leave a Relevant Comment