Apa Pseudo-Elements?
Sebuah CSS pseudo-elemen yang digunakan untuk gaya tertentu bagian dari elemen.
Sebagai contoh, dapat digunakan untuk:
- Gaya huruf pertama, atau jalur, dari unsur
- Sisipkan konten sebelum, atau setelah, isi elemen
Syintax
Sintaks pseudo-elemen:
selector::pseudo-element {
property: value;
}
Perhatikan notasi usus ganda - :: lini pertama dibandingkan: lini pertama
titik ganda menggantikan notasi tunggal usus untuk pseudo-elemen dalam CSS3. Ini merupakan upaya dari W3C untuk membedakan antara pseudo-class dan pseudo-elemen.
Sintaks tunggal usus digunakan untuk kedua pseudo-class dan pseudo-elemen dalam CSS2 dan CSS1.
Untuk kompatibilitas, sintaks tunggal usus dapat diterima untuk CSS2 dan CSS1 pseudo-elemen.
The :: lini pertama Pseudo-elemen
:: lini pertama pseudo-elemen digunakan untuk menambah gaya khusus untuk baris pertama dari teks.
:: lini pertama pseudo-elemen hanya dapat diterapkan untuk memblokir elemen.
p::first-line {
color: red;
font-variant: small-caps;
}
Properti berikut berlaku untuk :: lini pertama pseudo-elemen:
- properti font
- color properti
- properti background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line height
- clear
:: pertama huruf Pseudo-elemen
:: pertama huruf pseudo-elemen digunakan untuk menambah gaya khusus untuk huruf pertama dari teks.
:: pertama huruf pseudo-elemen hanya dapat diterapkan untuk memblokir elemen.
p::first-letter {
color: red;
font-size: xx-large;
}
Properti berikut berlaku untuk :: pertama huruf elemen pseudo:
- properties font
- properties color
- properti background
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align
- text-transform
- line height
- float
- clear
Pseudo-elemen dan Class CSS
Pseudo-elemen dapat dikombinasikan dengan kelas CSS:
p.intro::first-letter {
color: red;
font-size: xx-large;
}
Contoh di atas akan menampilkan huruf pertama dari paragraf dengan class = "intro", merah dan dalam ukuran yang lebih besar.
Multiple pseudo-element
Beberapa pseudo-elemen juga dapat dikombinasikan.
Pada contoh berikut, huruf pertama dari sebuah paragraf akan merah, dalam ukuran font xx-besar. Sisa dari baris pertama akan berwarna biru, dan small-caps. Sisa paragraf akan menjadi ukuran default font dan warna:
p::first-letter {
color: red;
font-size: xx-large;
}
p::first-line{
color: blue;
font-color: small-caps;
}
CSS - The ::before Pseudo-element
:: before pseudo-elemen dapat digunakan untuk memasukkan beberapa konten sebelum isi elemen.
Contoh berikut menyisipkan gambar sebelum setiap <p> elemen:]
p::before{
content: url(spinner.gif);
}
CSS - The ::after Pseudo-element
:: after pseudo-elemen dapat digunakan untuk memasukkan beberapa konten setelah isi elemen.
Contoh berikut menyisipkan gambar setelah setiap <p> elemen:
p::after{
content: url(spinner.gif);
}
CSS - The ::selection Pseudo-element
:: selection pseudo-elemen sesuai porsi elemen yang dipilih oleh pengguna.
Sifat CSS berikut dapat diterapkan untuk pemilihan ::: warna, latar belakang, kursor, dan garis.
Contoh berikut membuat merah teks yang dipilih pada latar belakang kuning:
::selection{
color: red;
background: yellow;
}
0 komentar:
Posting Komentar