Pengertian Pseudo Clases Dalam CSS

Mengenal Pseudo Clases pada CSS

Dalam CSS itu terdapat property tag yang dinamakan Pseudo Clases yaitu fungsi css palsu atau tidak sebenarnya tapi seolah-olah tag tersebut dapat berfungsi sesuai yang telah diterapkan dalam property css tersebut atau juga bisa dikatakan fungsi css tambahan. Pada Pseudo Clases terdapat beberapa macam yang dapat diterapkan pada fungsi css yaitu sebgai berikut :

1. “ : link ”

Pseudo Clases ini berfungsi pada link, untuk menandakan link aktif tapi belum pernah dikunjungi oleh komputernya pengunjung.

Contoh tagnya :

<style type="text/css">
a:link {color:green;}
</style>
Penjelasannya :
-  link yang belum pernah dikunjungi akan berwarna hijau sesuai yang telah kita tentukan.


2. “ : visited ”

Pseudo Clases ini berfungsi pada link yang sudah pernah dikunjungi oleh komputernya pengunjung. dan berfungsi menandakan bahwa komputer tersebut sudah pernah mengunjungi halaman yang akan dituju.

Contoh tagnya :

<style type="text/css">
a:visited {color:blue;}
</style>
Penjelasannya :
-  link ini sudah pernah dikunjungi ini akan berwarna biru sesuai yang telah ditentukan.


3. “ : active ”

Pseudo Clases ini berfungsi pada link yang sedang akan diklik.

Contoh tagnya :

<style type="text/css">
a:active {color:red;}
</style>
Penjelasannya :
-  link yang akan diklik akan berwarna merah, sesuai yang telah kita tentukan.


4. “ : hover ”

Pseudo Clases yang berfunsi pada objek yang disentuh mouse atau kursor, Jadi pada Pseudo ini dapat difungsikan pada semua objek.

Contoh tagnya :

<style type="text/css">
a:hover {color:yellow;}
</style>
Penjelasannya :
-  Objek dari hover tersebut adalah tag <a>
-  Sedangkan tag <a> berfungsi untuk membuat link
Jadi pada saat mouse menyentuh suatu link warnanya akan berubah sesuai yang telah kita tentukan.


5. “ : focus ”

Pseudo ini berfungsi pada teks input dan teks area saja yang saya ketahui. Jika kamu mengetahui Pseudo ini dapat difungsikan pada property lain tolong komentar di sini ya, buat sharing ilmunya gan..!

Contoh tagnya :

<style type="text/css">
textarea:focus { border: 2px solid blue; }
</style>
Penjelasannya :
jika kamu mengeklik pada teks area maka akan terlihat berbeda dari sebelum kamu mengeklik teks area tersebut, itu akan nampak  border berwarna biru pada teks area tersebut.


6. “ :first-letter ”

Pseudo ini berfungsi pada suatu paragraf, dan mengfungsikan untuk membedakan huruf pertamanya dari suatu paragraf tersebut.

Contoh tagnya :

<style type="text/css">
p:first-letter{
color:pink;}
</style>
Penjelasannya :
-  Pada Pseudo ini tag <p> adalah  objeknya.
-  Sedangkan tag <p> adalah tag untuk membuat paragraf
-  Maka pada paragraf tesebut huruf pertamanya akan berwarna pink


7. “ ::first-line”

Pseudo ini berfungsi pada tag <a>. dan funsinya untuk membedakan baris pertamanya pada paragraf tersebut.

Contoh tagnya :

<style type="text/css">
p:first-line{
color:orange;}
</style>
Penjelasannya :
-  Pada Pseudo ini tag <p> adalah  objeknya.
-  Sedangkan tag <p> adalah tag untuk membuat paragraf
-  Maka pada paragraf tesebut baris pertamanya akan berwarna orange


8. “ ::first-child ”

Pseudo ini berfungsi juga pada tag <p>, dan fungsinya untuk membedakan paragraf pertamanya dalam suatu <div>, jika kita sudah berpindah ke <div> lain maka paragraf pertamanya juga akan dibedakan.

Contoh tagnya :

<style type="text/css">
p:first-child{
background-color:orange;}
</style>
Penjelasannya :
-  Pada Pseudo ini tag <p> adalah  objeknya.
-  Sedangkan tag <p> adalah tag untuk membuat paragraf
-  Maka pada paragraf dalam satu <div> backgroundnya akan berwarna orange


9. “ :before ”


Pada Pseudo ini berfungsi pada semua objek. dan Pseudo ini berfungsi menambahkan property css, dan property tambahan tersebut akan ditampilkan sebelum objek tersebut itu ditampilkan.

Contoh tagnya :

<style type="text/css">
p:before
{border:5px solid yellow;}
</style>
Penjelasannya :
-  Pada Pseudo ini tag <p> adalah  objeknya.
-  Sedangkan tag <p> adalah tag untuk membuat paragraf
- Maka sebelum kata pertama dalam paragraf muncul, akan tampak dahulu boder yang berwarna kuning


10. “ :after ”


Pada Pseudo ini juga berfungsi pada semua objek. dan fungsinya kebalikan dari Pseudo ": before" yaitu menambahkan property css, dan tambahan tersebut akan ditampilkan sesudah objek tersebut ditampilkan.

Contoh tagnya :

<style type="text/css">
p:after
{border:5px solid yellow;}
</style>
Penjelasannya :
-  Pada Pseudo ini tag <p> adalah  objeknya.
-  Sedangkan tag <p> adalah tag untuk membuat paragraf
-  Maka setelah kata terakhir dalam paragraf muncul, akan tampak boder yang berwarna kuning


11. “ lang (it) ”

Pseudo Clases ini yang saya tahu berfungsi untuk mengkhususkan tag html yang mana kita telah memberi Pseudo ini agar fungsi tag html ini berbeda dari yang lainnya. Misal seperti kita akan menggunakan objek tag <p> pada Pseudo ini maka jika kita ingin kita harus menuliskan tag htmlnya seperti ini <p lang = it> pada kata "it" kita dapat menuliskan apapun tapi harus sama dengan yang tertulis pada cssnya. Pseudo ini juga dapat berfungsi pada semua objek

Contoh tagnya :

<style type="text/css">
p:lang(coba)
{ background:yellow;
border:10px solid red;
}
</style>
Penjelasannya :
-  Pada Pseudo ini tag <p> adalah  objeknya.
-  Sedangkan tag <p> adalah tag untuk membuat paragraf
-  Maka pada tag <p> yang dituliskan seperti ini "<p lang ="coba">" akan tampil background kuning dan bordernya merah.

Untuk lebih jelasnya dapat dilihat pada tabel berikut :

Pseudo Clases	Contoh	Penjelasan / Fungsi
:link	a:link	link aktif yang belum pernah dikunjungi
:visited	a:visited	link aktif yang sudah pernah dikunjungi
:active	a:active	link yang akan diklik
:hover	a:hover	link yang tersentuh oleh mouse
:focus	input:focus	memberi efek tertentu pada teks area / teks input
:first-letter	p:first-letter	membedakan huruf pertama pada paragraf
:first-line	p:first-line	membedakan baris pertama dalam paragraf
:first-child	p:first-child	membedakan paragraf pertama dalam suatu <div>
:before	p:before	menambah fungsi css sebelum element <p> atau objek tertentu
:after	p:after	menambah fungsi css sesudah element <p> atau objek tertentu
:lang(language)	p:lang(it)	membedakan element <p> atau objek yang dituliskan value "it"