Sintaksis
Sintaks dari pseudo-kelas:
selector:pseudo-class {property:value;}
Kelas CSS juga dapat digunakan dengan pseudo-kelas:
selector.class:pseudo-class {property:value;}
Jangkar Pseudo-kelas
Link dapat ditampilkan dalam cara yang berbeda dalam browser CSS pendukung:
A: link {color: # FF0000;} / * belum dikunjungi link yang * /
a: visited {color: # 00FF00;} / * mengunjungi link yang * /
a: hover {color: # FF00FF;} / * mouse Link * /
yang: aktif {color: # 0000FF;} / * link yang dipilih * /
- Catatan: a: hover HARUS datang setelah: link dan a: visited dalam definisi CSS agar efektif!!
- Catatan:: aktif HARUS datang setelah a: hover dalam definisi CSS agar efektif!!
- Catatan: Pseudo-nama kelas tidak case-sensitif.
Pseudo-kelas dan Kelas CSS
Pseudo-class dapat dikombinasikan dengan CSS kelas:
a.red:visited {color:#FF0000;}
<a href=”css_syntax.asp”>CSS Syntax</a>
Jika link dalam contoh di atas telah dikunjungi, maka akan ditampilkan dalam warna merah.
CSS – Yang: pertama-anak Pseudo-kelas
Pertama-anak pseudo-class cocok dengan elemen yang ditentukan itu adalah anak pertama dari elemen lain.
Catatan: Untuk: pertama-anak untuk bekerja di IE8 dan sebelumnya, sebuah <DOCTYPE!> Harus dinyatakan.
Pertandingan elemen <p> pertama
Pada contoh berikut, pemilih pertandingan setiap elemen <p> yang merupakan anak pertama dari elemen apapun:
<html>
<head>
<style type=”text/css”>
p:first-child
{
color:blue;
}
</style>
</head><body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
Pertandingan elemen <i> pertama di semua elemen <p>
Pada contoh berikut, pemilih pertandingan elemen <i> pertama di semua elemen <p>:
<html>
<head>
<style type=”text/css”>
p> i: pertama-anak
{
font-weight: bold;
}
</ style>
</ head><body>
<p> Saya kuat <i> </ i> manusia. Saya seorang yang kuat <i> </ i> manusia. </ P>
<p> Saya kuat <i> </ i> manusia. Saya seorang yang kuat <i> </ i> manusia. </ P>
</ body>
</ html>
Pertandingan elemen <i> semua dalam semua elemen <p> anak
pertama
Pada contoh berikut, pemilih pertandingan semua elemen <i> dalam elemen <p> yang merupakan anak pertama dari elemen lain:
<html>
<head>
<style type=”text/css”>
p: pertama-anak saya
{
warna: biru;
}
</ style>
</ head><body>
<p> Saya kuat <i> </ i> manusia. Saya seorang yang kuat <i> </ i> manusia. </ P>
<p> Saya kuat <i> </ i> manusia. Saya seorang yang kuat <i> </ i> manusia. </ P>
</ body>
</ html>
CSS – The: lang Pseudo-kelas
Para: lang pseudo-class memungkinkan Anda untuk menentukan peraturan khusus untuk bahasa yang berbeda.
Catatan: IE8 mendukung: lang pseudo-class hanya jika ditetapkan. <DOCTYPE!>
Pada contoh di bawah ini,: lang kelas mendefinisikan tanda kutip untuk elemen q dengan lang = “no”:
<html>
<head>
<style type=”text/css”>
q: lang (tidak) {kutipan: “~” “~”;}
</ style>
</ head><body>
Beberapa teks <p> <q lang=”no”> Sebuah kutipan dalam sebuah paragraf </ q> Beberapa teks </ p>.
</ body>
</ html>