Gaya elemen ketika pengguna mouse di atasnya
Gaya yang dikunjungi dan link yang belum dikunjungi berbeda
Gaya elemen saat mendapat fokus
Sintaksis
Sintaks pseudo-classes:
selector:pseudo-class {Jangkar Pseudo-kelas
property:value;
}
Tautan dapat ditampilkan dengan berbagai cara:
Contoh:
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!/* Link yang belum dikunjungi */
a:link {
color: #FF0000;
}
/* Link yang dikunjungi */
a:visited {
color: #00FF00;
}
/* Mouse di atas link */
a:hover {
color: #FF00FF;
}
/* Link yang dipilih */
a:active {
color: #0000FF;
}
Kelas Pseudo-class dan CSS
Pseudo-class dapat dikombinasikan dengan kelas CSS:Bila mengarahkan kursor ke tautan di contoh, warnanya akan berubah:
Contoh:
a.highlight:hover {Arahkan kursor ke <div>
color: #ff0000;
}
Contoh penggunaan: hover pseudo-class pada elemen <div>:
Contoh:
div:hover {
background-color: blue;
}
CSS - The :first-child Pseudo-class
The: first-child pseudo-class cocok dengan elemen tertentu yang merupakan anak pertama dari elemen lain.Cocokkan elemen <p> pertama
Dalam contoh berikut, pemilih cocok dengan elemen <p> yang merupakan anak pertama dari elemen apa pun:
Contoh:
p:first-child {Cocokkan unsur <i> pertama dalam semua elemen <p>
color: blue;
}
Dalam contoh berikut, pemilih cocok dengan elemen <i> pertama di semua elemen <p>:
Contoh:
p i:first-child {Cocokkan semua elemen <i> di semua elemen anak pertama <p>
color: blue;
}
Dalam contoh berikut, pemilih cocok dengan semua elemen <i> di elemen <p> yang merupakan anak pertama dari elemen lain:
Contoh:
p:first-child i {CSS - The: lang Pseudo-class
color: blue;
}
The: lang pseudo-class memungkinkan untuk menentukan aturan khusus untuk bahasa yang berbeda.Pada contoh di bawah ini,: lang mendefinisikan tanda petik untuk <q> elemen dengan lang = "tidak":
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>
Semua Pseudo Classes CSS
Selector
contoh
Contoh deskripsi
:active
a:active
Memilih link yang aktif
:checked
input:checked
Memilih setiap elemen <input> yang dicentang
:disabled
input:disabled
Memilih setiap elemen <input> yang dinonaktifkan
:empty
p:empty
Memilih setiap elemen <p> yang tidak memiliki anak
:enabled
input:enabled
Memilih setiap elemen <input> yang aktif
:first-child
p:first-child
Memilih setiap elemen yang merupakan anak pertama dari orang tuanya
:first-of-type
p:first-of-type
Memilih setiap elemen <p> yang merupakan elemen <p> pertama dari induknya.
:focus
input:focus
Memilih elemen <input> yang memiliki fokus
:hover
a:hover
Memilih link pada mouse over
:in-range
input:in-range
Memilih elemen <input> dengan nilai dalam kisaran yang ditentukan
:invalid
input:invalid
Memilih semua elemen <input> dengan nilai yang tidak valid
:lang(language)
p:lang(it)
Memilih setiap elemen <p> dengan nilai atribut lang yang dimulai dengan "itu"
:last-child
p:last-child
Memilih setiap elemen yang merupakan anak terakhir dari orang tuanya
:last-of-type
p:last-of-type
Memilih setiap elemen <p> yang merupakan elemen <p> terakhir dari induknya.
:link
a:link
Memilih semua link yang belum dikunjungi
:not(selector)
:not(p)
Memilih setiap elemen yang bukan elemen <p>
:nth-child(n)
p:nth-child(2)
Memilih setiap elemen <p> yang merupakan anak kedua dari induknya
:nth-last-child(n)
p:nth-last-child(2)
Memilih setiap elemen <p> yang merupakan anak kedua dari orang tuanya, terhitung dari anak terakhir
:nth-last-of-type(n)
p:nth-last-of-type(2)
Memilih setiap elemen <p> yang merupakan elemen kedua dari induknya, menghitung dari anak terakhir
:nth-of-type(n)
p:nth-of-type(2)
Memilih setiap elemen <p> yang merupakan elemen <p> kedua dari induknya
:only-of-type
p:only-of-type
Memilih setiap elemen <p> yang merupakan satu-satunya elemen <p> dari induknya.
:only-child
p:only-child
Memilih setiap elemen yang merupakan satu-satunya anak dari orang tuanya
:optional
input:optional
Memilih elemen <input> tanpa atribut "wajib/required"
:out-of-range
input:out-of-range
Memilih elemen <input> dengan nilai di luar rentang yang ditentukan
:read-only
input:read-only
Memilih elemen <input> dengan atribut "readonly" yang ditentukan
:read-write
input:read-write
Memilih elemen <input> tanpa atribut "readonly"
:required
input:required
Memilih elemen <input> dengan atribut "required" yang ditentukan
:root
root
Memilih elemen root dokumen
:target
#news:target
Memilih elemen #news aktif saat ini (mengklik URL yang berisi nama jangkar itu)
:valid
input:valid
Memilih semua elemen <input> dengan nilai yang valid
:visited
a:visited
Memilih semua link yang dikunjungi
Semua Pseudo Elements CSS
Selector
Example
Example description
::after
p::after
Sisipkan konten setelah setiap elemen <p>
::before
p::before
Sisipkan konten sebelum setiap elemen <p>
::first-letter
p::first-letter
Memilih huruf pertama dari setiap elemen <p>
::first-line
p::first-line
Memilih baris pertama dari setiap elemen <p>
::selection
p::selection
Memilih bagian dari elemen yang dipilih oleh user
Out Of Topic Show Konversi KodeHide Konversi Kode