Apa Pseudo-class?
Sebuah pseudo-class digunakan untuk mendefinisikan keadaan khusus dari suatu unsur.
Sebagai contoh, dapat digunakan untuk:
- Gaya elemen ketika mouse pengguna di atasnya
- Gaya dikunjungi dan belum dikunjungi link berbeda
syntax
Sintaks pseudo-class:
selector:pseudo-class {
property: value;
}
Jangkar Pseudo-kelas
Link dapat ditampilkan dengan cara yang berbeda:
a:link {
color: yellow;
}
a:visited {
color: red;
}
a:hover {
color: blue;
}
a:active {
color: green;
}
Catatan: a: hover harus setelah a: link dan a: visited dalam definisi CSS agar efektif !!
a: active harus setelah: hover dalam definisi CSS agar efektif !!
Nama pseudo-class yang tidak case-sensitive.
Pseudo-class dan class CSS
Pseudo-classs dapat dikombinasikan dengan class CSS:
a.highlight:hover {
color: blue;
}
CSS - The: first-child Pseudo-class
: first-child pseudo-class cocok dengan elemen tertentu yang merupakan first child dari elemen lain.
Mencocokkan pertama <p> elemen
Pada contoh berikut, pemilih cocok setiap <p> unsur yang merupakan first child dari setiap elemen:
p:first-child {
color: blue;
}
Mencocokkan pertama <i> elemen dalam semua <p> elemen
Pada contoh berikut, pemilih cocok pertama <i> elemen dalam semua <p> elemen:
p i:first-child {
color: blue;
}
CSS - The: lang Pseudo-class
The: lang pseudo-class memungkinkan Anda untuk menentukan aturan khusus untuk bahasa yang berbeda.
Catatan: IE8 mendukung: lang pseudo-class hanya jika <DOCTYPE!> ditentukan.
Pada contoh di bawah ini,: kelas lang mendefinisikan tanda kutip untuk <q> elemen dengan lang = "no":
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
0 komentar:
Posting Komentar