Tutorial CSS pseudo-elemen Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari tatabahasa,: Pertama-line pseudo-elemen,contoh,: Pertama-surat pseudo-elemen,contoh,Pseudo-elemen dan kelas CSS,Beberapa Pseudo-elemen,contoh,CSS -: sebelum pseudo-elemen,contoh,CSS -: setelah pseudo-element,contoh,Semua CSS pseudo-kelas / elemen,
CSS pseudo-element digunakan untuk menambahkan beberapa efek pemilih khusus.
sintaks Pseudo-elemen:
Kelas CSS juga dapat menggunakan pseudo-elemen:
"Pertama-line" pseudo-elemen yang digunakan untuk mengatur gaya khusus untuk baris pertama dari teks.
Pada contoh berikut, browser akan didasarkan pada "lini pertama" pseudo-elemen dalam gaya baris pertama dari format teks elemen p:
Catatan: "pertama-line" pseudo-elemen hanya dapat digunakan untuk elemen blok-tingkat.
CATATAN: sifat berikut dapat diterapkan pada "lini pertama" pseudo-elemen:
"Pertama-huruf" pseudo-elemen yang digunakan untuk mengatur gaya khusus dengan huruf pertama dari teks:
Catatan: "pertama huruf" pseudo-elemen hanya dapat digunakan untuk elemen blok-tingkat.
CATATAN: sifat berikut dapat diterapkan pada "pertama huruf" pseudo-elemen:
Pseudo-elemen dapat dikombinasikan dengan kelas CSS:
Contoh di atas akan membuat semua kelas sebagai huruf pertama dari artikel ayat berubah merah.
Sebuah pluralitas pseudo-elemen dapat dikombinasikan untuk menggunakan.
Pada contoh berikut, paragraf pertama dari surat itu akan ditampilkan dalam warna merah, ukuran font adalah xx-besar. Baris pertama dari sisa teks akan berwarna biru, dan kecil huruf.
Paragraf yang tersisa dari teks dalam ukuran font default dan warna untuk tampilan:
": Sebelum" pseudo-elemen dapat memasukkan konten baru di depan isi dari elemen.
Contoh berikut untuk menyisipkan gambar di depan setiap <h1> elemen:
": Setelah" pseudo-elemen dapat memasukkan konten baru setelah isi dari elemen.
Contoh-contoh berikut menyisipkan gambar setelah setiap <h1> elemen:
Pemilih | contoh | misalnya acara |
---|---|---|
: link | a:link | Pilih semua link yang belum dikunjungi |
: mengunjungi | a:visited | Pilih semua link yang dikunjungi |
: aktif | a:active | Pilih adalah link aktif |
: hover | a:hover | Menempatkan mouse pada status link |
: fokus | input:focus | Setelah memilih elemen input memiliki fokus |
: Pertama-surat | p:first-letter | Pilih huruf pertama dari setiap <p> elemen |
: Lini pertama | p:first-line | Pilih baris pertama dari setiap <p> elemen |
: Pertama-anak | p:first-child | <] P> pemilih elemen cocok dengan elemen yang tergabung dalam elemen anak pertama |
: sebelum | p:before | Sisipkan konten sebelum setiap <p> elemen |
: setelah | p:after | Sisipkan konten setelah setiap <p> elemen |
: Lang (bahasa) | p:lang(it) | lang pilihan atribut <p> elemen ke nilai awal |