Anchor Pseudo-classes

Merubah link dengan beberapa cara yang berbeda tergantung dari aksi yang dilakukan.

Berikut ini adalah contoh sintax :

/* link belum di klik */
 a:link {
   color: red;
}
/* link telah di klik */
a:visited {
   color: green;
}
/* link tersorot mouse */
a:hover {
  color: hotpink;
}
/* link terselect */
a:active {
  color: blue;
}

Seperti contoh diatas, kita bias memberikan lebih dari satu pseudo class pada tiap tag Dan untuk lebih efketifnya gunakan tag :hover setelah :link dan :visited dan gunakan :active setelah :hover

Pseudo-classes dan HTML Classes

Yaitu menggunaan pseudo-class yang di gabungkan dengan elemnt html

Berikut adalah contoh syntanya:

a.highlight:hover {
  color: #ff0000;
  font-size: 22px;
}

Menerapkan Hover pada <div>

:hover juga bisa diterepkan pada div

Contoh syntaxnya:

div{
    background-color: green;
    color: white;
    padding: 25px;
    text-align: center;
}
div:hover {
    background-color: blue;
}

Contoh sederhana menggunakan Hover

#muncul { display: none; background-color: green; padding: 10px; } div:hover #muncul { display: block; }

arahkan kesini untuk meunculkan div tersembunyi

Haloooo

Pseudo class selector :first-child dan :last-child

Pseudo class :first-child yang mulai diperkenalkan pada CSS 2, digunakan untuk menseleksi element children yang berada pada urutan pertama sedangkan :last-child yang baru diperkenalkan pada CSS 3, digunakan untuk menseleksi element children yang berada pada urutan terakhir. Element children ini berlaku untuk tiap-tiap parent yang ada di dalam suatu group element, perhatikan contoh berikut:

HTML


<div class="contoh-child">
  <p>biru</p>
  <p>putih</p>
  <p>putih</p>
  <p>putih</p>
  <p>putih</p>
  <p>putih</p>
  <p>hijau</p>
</div>

sedangkan untuk CSS nya

sample-child p:first-child {
    color: blue;
}
.sample-child p:last-child {
    color: hijau;
}

maka hasilnya di browser akan muncul seperti dibawah ini

seeprti kit lihat bersama, warnanya akan berubah sesuai yang dipilih

Mungkin itu saja untuk penggunaan pseudo element, contoh lainya bisa mengunjungi

https://www.w3schools.com/css/css_pseudo_classes.asp