Apa Pseudo-kelas?
Sebuah pseudo-class digunakan untuk menentukan keadaan khusus dari suatu unsur.
Sebagai contoh, dapat digunakan untuk:
- Gaya elemen ketika pengguna mouse di atasnya
- Gaya dikunjungi dan belum dikunjungi link berbeda
- Gaya elemen ketika mendapat fokus
Mouse Over Me
Sintaksis
Sintaks pseudo-kelas:
selector:pseudo-class {
property:value;
}Jangkar Pseudo-kelas
Link dapat ditampilkan dalam berbagai cara:
Contoh
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Cobalah sendiri "  | Catatan: a:hover HARUS datang setelah a:link dan a:visited ! Dalam definisi CSS agar efektif a:active HARUS datang setelah a:hover dalam definisi CSS agar efektif!nama pseudo-class tidak case-sensitive. |
|---|
Pseudo-kelas dan CSS Kelas
Pseudo-kelas dapat dikombinasikan dengan kelas CSS:
Ketika Anda membawa lebih dari link dalam contoh, itu akan berubah warna:
Arahkan pada <div>
Sebuah contoh penggunaan :hover pseudo-class pada <div> elemen:
CSS - The :first-child Pseudo-class
The :first-child pseudo-class cocok dengan elemen tertentu yang merupakan anak pertama dari elemen lain.
Mencocokkan pertama <p> elemen
Pada contoh berikut, pemilih pertandingan setiap <p> unsur yang merupakan anak pertama dari setiap elemen:
Mencocokkan pertama <i> elemen dalam semua <p> elemen
Pada contoh berikut, pemilih pertandingan pertama <i> elemen dalam semua <p> elemen:
Cocok dengan semua <i> elemen dalam semua anak pertama <p> elemen
Pada contoh berikut, pemilih pertandingan semua <i> elemen di <p> elemen yang merupakan anak pertama dari elemen lain:
CSS - The :lang Pseudo-class
The :lang pseudo-class memungkinkan Anda untuk menentukan aturan khusus untuk bahasa yang berbeda.
Pada contoh di bawah ini, :lang mendefinisikan tanda kutip untuk <q> elemen dengan lang="no" :
Contoh
<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>
Cobalah sendiri " 
Contoh lebih
Tambahkan gaya yang berbeda untuk hyperlink
Contoh ini menunjukkan bagaimana untuk menambahkan gaya lain untuk hyperlink.
Penggunaan :focus
Contoh ini menunjukkan bagaimana menggunakan :focus pseudo-class.
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»
Semua Kelas CSS Pseudo
| Pemilih | Contoh | deskripsi contoh |
|---|---|---|
| :active | a:active | Memilih link aktif |
| :checked | input:checked | Memilih setiap diperiksa <input> elemen |
| :disabled | input:disabled | Memilih setiap cacat <input> elemen |
| :empty | p:empty | Memilih setiap <p> elemen yang tidak memiliki anak |
| :enabled | input:enabled | Memilih setiap diaktifkan <input> elemen |
| :first-child | p:first-child | Memilih setiap <p> elemen yang merupakan anak pertama dari induknya |
| :first-of-type | p:first-of-type | Memilih setiap <p> unsur yang pertama <p> unsur induknya |
| :focus | input:focus | Memilih <input> elemen yang memiliki fokus |
| :hover | a:hover | Memilih link pada mouse |
| :in-range | input:in-range | Memilih <input> elemen dengan nilai dalam kisaran tertentu |
| :invalid | input:invalid | Memilih semua <input> elemen dengan nilai yang tidak valid |
| :lang(language) | p:lang(it) | Memilih setiap <p> elemen dengan nilai atribut lang dimulai dengan "itu" |
| :last-child | p:last-child | Memilih setiap <p> elemen yang merupakan anak terakhir dari induknya |
| :last-of-type | p:last-of-type | Memilih setiap <p> unsur yang terakhir <p> unsur induknya |
| :link | a:link | Memilih semua link yang belum dikunjungi |
| :not(selector) | :not(p) | Memilih setiap elemen yang tidak <p> elemen |
| :nth-child(n) | p:nth-child(2) | Memilih setiap <p> unsur yang merupakan anak kedua dari induknya |
| :nth-last-child(n) | p:nth-last-child(2) | Memilih setiap <p> unsur yang merupakan anak kedua dari induknya, menghitung dari anak terakhir |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Memilih setiap <p> unsur yang kedua <p> unsur induknya, menghitung dari anak terakhir |
| :nth-of-type(n) | p:nth-of-type(2) | Memilih setiap <p> unsur yang kedua <p> unsur induknya |
| :only-of-type | p:only-of-type | Memilih setiap <p> unsur yang merupakan satu-satunya <p> unsur induknya |
| :only-child | p:only-child | Memilih setiap <p> unsur yang merupakan satu-satunya anak dari induknya |
| :optional | input:optional | Memilih <input> elemen tanpa "required" atribut |
| :out-of-range | input:out-of-range | Memilih <input> elemen dengan nilai luar kisaran tertentu |
| :read-only | input:read-only | Memilih <input> elemen dengan "readonly" atribut tertentu |
| :read-write | input:read-write | Memilih <input> elemen tanpa "readonly" atribut |
| :required | input:required | Memilih <input> elemen dengan "required" atribut tertentu |
| :root | root | Memilih elemen root dokumen ini |
| :target | #news:target | Memilih elemen #news aktif saat ini (diklik pada URL yang berisi nama anchor) |
| :valid | input:valid | Memilih semua <input> elemen dengan nilai yang valid |
| :visited | a:visited | Memilih semua link yang dikunjungi |
Semua CSS Pseudo Elemen
| Pemilih | Contoh | deskripsi contoh |
|---|---|---|
| ::after | p::after | Sisipkan konten setelah setiap <p> elemen |
| ::before | p::before | Sisipkan konten sebelum setiap <p> elemen |
| ::first-letter | p::first-letter | Memilih huruf pertama dari setiap <p> elemen |
| ::first-line | p::first-line | Memilih baris pertama dari setiap <p> elemen |
| ::selection | p::selection | Memilih bagian dari suatu unsur yang dipilih oleh pengguna |