Penggunaan Pseudo class pada CSS

Kenapa dinamakan pseudo?……. Maaf ya saya tidak tahu kenapa disebut dengan pseudo,mungkin beberapa contoh dan penggunaan pseudo pada CSS ini bisa dipahami maksudnya.
Pada umumya yang disebut dengan pseudo ini adalah pemberian khusus pada tag “a”.
Apa itu tag “a” .
Tidak hanya untuk tag “a” saja,masih banyak contoh yang bisa disebut dengan pseudo class ini.Namun ini hanya yang paling umum dipakai saja,yaitu untuk membuat style pada achor text.

“a”  adalah selector yang diambil dari HTML untuk membuat yang namanya ANCHOR TEXT.
Tag “a” dari syntax HTML untuk membuat anchor text itu adalah;
<a href=”http://home.com” >ANCHOR TEXT</a>

ANCHOR TEXT sendiri adalah text yang mengandung tautan atau link,hasil dari syntax diatas adalah ;
 ANCHOR TEX

Contoh Pseudo class pada link

:link , untuk sebuah tautan  yang belum (belum dimasuki/diklik)

:visited ,untuk tautan yang sudah di klik

:hover ,style   jika pointer diarahkan

:active , style jika link diklik oleh user

Untuk mendeklarasikannya kedalam syntax css,contohnya;

p a:link{color: red}

Maka semua link yang berada pada suatu elemen HTML (<p> …text link…</p>) akan memiliki warna merah.

link contoh

p a:visited{color: blue}

Maka semua link yang berada pada suatu elemen HTML (<p> …text link…</p>) yang sudah di klik oleh browser user akan berwarna biru.

p a:hover{color:orange}

Maka semua link yang berada pada suatu elemen HTML (<p> …text link…</p>) ,jika pointer user mengarah pada link maka link akan berubah warna menjadi merah.

p a:active {color: yellow}

Maka semua link yang berada pada suatu elemen HTML (<p> …text link…</p>) jika mouse / lingk di tekan,maka sesaat akan memberi jeda warna kunng.

Mengenai deklarasi dari  a: kita bisa memberi sentuhan efek macam macam dengan bereksplorasi dengan deklarasi dari pseudo class ini.Silahkan dicoba…

For example:

Penulisan syntax CSS pseudo

a:link {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;

}
a:visited {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;

}
a:hover {
color: black;
background-color: white;
text-decoration: none;
border: 2px solid black;
}

Jika tag “a” dipakai sebagai descendent selector,misalnya disini selector diatasnya adalah “.post-body” (hanya ngasih efek untuk “anchor text” yang berada di bawah CLASS .post-body),gampang saja hanya tinggal menambahkan.

For example

.post-body a:link {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;

}
.post-body a:visited {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;
}
.post-body a:hover {
color: black;
background-color: white;
text-decoration: none;
border: 2px solid black;
}
.s2 a{color: red;font-size: 30px;}
.s2 a:hover{color: green;}

Hasil dibawah ini,silahkan arahkan pointer anda untuk melihat hasilnya 😀

.s a:link {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;

}
.s a:visited {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;

}
.s a:hover {
color: black;
background-color: white;
text-decoration: none;
border: 2px solid black;

}
.s2 a{color: red;font-size: 30px;}
.s2 a:hover{color: green;font-size: 30px;}

Contoh lain penggunaan :hover pada suatu elemen;

.contoh{background: red;
width: 500px;
height: 40px;
border: 2px solid blue;
}
.contoh:hover{background: yellow;
width: 500px;
height: 40px;
border: 2px solid darkred;
}

Penampakan;

.contoh{background: red;
width: 500px;
height: 40px;
border: 2px solid blue;
}
.contoh:hover{background: yellow;
width: 500px;
height: 40px;
border: 2px solid darkred;
}