Pseudo-class CSS


Apa itu Pseudo-class?

Pseudo-class digunakan untuk mendefinisikan keadaan khusus dari suatu elemen.

Misalnya, dapat digunakan untuk:

  • Style elemen saat pengguna mengarahkan mouse
  • Style link yang dikunjungi dan yang belum dikunjungi secara berbeda
  • Style elemen saat mendapat fokus

Sintaks

Sintaks pseudo-class:

selector:pseudo-class {
  property: value;
}

Jangkar Pseudo-class

Link dapat ditampilkan dengan berbagai cara.


Contoh

/* Link yang belum dikunjungi */
a:link {
  color: #FF0000;
}

/* Link yang sudah dikunjungi */
a:visited {
  color: #00FF00;
}

/* mouse diarahkan ke link */
a:hover {
  color: #FF00FF;
}

/* link yang sudah diklik */
a:active {
  color: #0000FF;
}

Catatan: a:hover harus muncul setelah a:link dan a:visited dalam definisi CSS agar efektif. a:active harus muncul setelah a:hover di definisi CSS agar efektif. Nama kelas pseudo tidak peka huruf besar-kecil.


Pseudo-class dan Class CSS

Pseudo-class dapat digabungkan dengan Class CSS:

Saat Anda mengarahkan kursor ke tautan dalam contoh, maka akan berubah warna. 

a.highlight:hover {
  color: #ff0000;
}

Arahkan kursor ke <div>

Contoh penggunaan pseudo-class :hover pada elemen <div>. 

div:hover {
  background-color: blue;
}

Tooltip Hover Simpel

Arahkan kursor ke elemen <div> untuk menampilkan elemen <p> (seperti tooltip).

Arahkan kesini untuk melihat element <p>

Halo! Aku disini!

 
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

CSS - Pseudo-class :first-child

Pseudo-class :first-child cocok dengan elemen tertentu yang merupakan anak pertama dari elemen lain.


Cocokkan elemen <p> pertama

Dalam contoh berikut, selector cocok dengan elemen <p> apa pun yang merupakan anak pertama dari elemen apa pun. 

p:first-child {
  color: blue;
}

Cocokkan elemen <i> pertama di semua elemen <p>

Dalam contoh berikut, selector cocok dengan elemen <i> pertama di semua elemen <p>. 

p i:first-child {
  color: blue;
}

Cocokkan semua elemen <i> di semua elemen <p> anak pertama

Dalam contoh berikut, selector cocok dengan semua elemen <i> di elemen <p> yang merupakan anak pertama dari elemen lain. 

p:first-child i {
  color: blue;
}

CSS - Pseudo-class :lang

Pseudo-class :lang memungkinkan Anda untuk menentukan aturan khusus untuk bahasa yang berbeda.

Pada contoh di bawah, :lang mendefinisikan quotation untuk elemen <q> dengan lang="no". 

<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Teks <q lang="no">Sebuah kutipan di paragraf</q> Teks.</p>

</body>
</html>

Sumber referensi: w3schools

Komentar

Posting Komentar