Apa itu Pseudo-Elements?Elemen pseudo CSS digunakan untuk menyesuaikan bagian elemen tertentu.Misalnya, bisa digunakan untuk:
Gaya huruf pertama, atau garis, dari sebuah elemen
Masukkan konten sebelum, atau sesudah, isi elemen
Sintaksis
Sintaks dari elemen semu:
selector::pseudo-element {Perhatikan notasi kolon ganda - ::first-line versus :first-lineKolom ganda menggantikan notasi kolon tunggal untuk elemen pseudo dalam CSS3. Ini adalah untuk membedakan antara kelas pseudo dan elemen semu.Sintaks single-colon digunakan untuk kelas pseudo dan pseudo-elements di CSS2 dan CSS1.Untuk kompatibilitas, sintaks single-colon dapat diterima untuk elemen pseudo CSS2 dan CSS1.
property:value;
}
:: first-line Pseudo-element
::first-line pseudo-elemen digunakan untuk menambahkan gaya khusus ke baris pertama teks.Contoh berikut memformat baris pertama teks di semua elemen <p>:
Contoh:
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
:: first-line pseudo-element hanya dapat diterapkan pada block-level elements.Properti berikut berlaku untuk :: first-line pseudo-element:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
:: first-letter Pseudo-element
::first-letter pseudo-elemen digunakan untuk menambahkan gaya khusus ke huruf pertama dari sebuah teks.Contoh berikut memformat huruf pertama dari teks di semua elemen <p>: Contoh:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
:: first-letter pseudo-element hanya bisa diaplikasikan pada block-level elements.Properti berikut berlaku untuk :: first-letter pseudo- element:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
Pseudo-elemen dan Kelas CSS
Elemen pseudo dapat dikombinasikan dengan kelas CSS:
Contoh
p.intro::first-letter {Contoh di atas akan menampilkan huruf pertama paragraf dengan class = "intro", berwarna merah dan dalam ukuran lebih besar
color: #ff0000;
font-size:200%;
}
.Multiple/ Beberapa elemen pseudo
Beberapa unsur pseudo juga bisa digabungkan.Dalam contoh berikut, huruf pertama paragraf akan berwarna merah, dalam ukuran huruf xx-besar. Selebihnya dari garis pertama akan biru, dan dalam huruf kecil. Sisa paragraf akan menjadi ukuran dan warna font default:
Contoh
p::first-letter {CSS - The :: before Pseudo-element
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
:: before pseudo-element dapat digunakan untuk memasukkan beberapa konten sebelum isi sebuah elemen.Contoh berikut menyisipkan gambar sebelum konten masing-masing elemen <h1>:
Contoh
h1::before {CSS - The :: after Pseudo-element
content: url(smiley.gif);
}
:: after pseudo-elemen dapat digunakan untuk memasukkan beberapa konten setelah isi elemen.Contoh berikut memasukkan gambar setelah konten dari setiap elemen <h1>:
Contoh
h1::after {CSS - The :: selection Pseudo-element
content: url(smiley.gif);
}
::selection elemen pseudo cocok dengan bagian elemen yang dipilih oleh pengguna.Properti CSS berikut dapat diterapkan ke :: selection: color, background, cursor, and outline.Contoh berikut membuat teks yang dipilih berwarna merah pada latar belakang kuning:Contoh
::selection {
color: red;
background: yellow;
}
Semua Pseudo Elements CSS
| Selector | Contoh | Contoh deskripsi |
|---|---|---|
| ::after | p::after | Masukkan sesuatu setelah isi tiap elemen <p> |
| ::before | p::before | Sisipkan sesuatu sebelum isi masing-masing 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 |
Seamua 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 |
Out Of Topic Show Konversi KodeHide Konversi Kode