Cara Menggunakan Pseudo-elements Selectors Pada CSS

Pada tutorial sebelumnya kalian sudah belajar tentang cara menggunakan Pseudo-class Selector. Jika pada Pseudo-class Selector lebih fokus kepada kondisi khusus dari Elemen HTML, maka Pseudo-element selector akan menyeleksi ‘potongan’ tag HTML atau mengakses sebuah elemen yang sebelumnya tidak ada.

Pseudo-element Selector digunakan untuk mengubah style bagian dari elemen yang telah ditentukan. Contohnya mengubah style huruf pertama atau garis dari sebuah elemen, menambahkan style sebelum dan sesudah isi dari elemen.

Format Penulisan Pseudo-element Selector CSS

Format penulisan atau Syntax dari Pseudo-element Selector ini berbeda-beda, untuk versi CSS1 dan CSS2, format penulisannya :

Sedangkan pada versi CSS3 format penulisan Pseudo-element Selector seperti ini:

Perbedaannya adalah pada penggunakan tanda : dan :: , jika di CSS1 dan CSS2 menggunakan tanda : sedangkan pada CSS3 menggunakan ::.

Meskipun demikian sampai saat ini Web Browser masih mendukung penggunaan tanda : untuk penulisan Pseudo-element Selector ini.

Contoh Penggunakan Pseudo-element Selector

Kode HTML dan CSS:

Hasil dari kode HTML dan CSS di atas sebagai berikut:

Contoh Hasil Penggunakan Pseudo-element Selector CSS

Contoh Hasil Penggunakan Pseudo-element Selector CSS

Demikian Tutorial Cara Menggunakan Pseudo-elements Selectors Pada CSS, untuk cara penggunaan pseudo-class selector sudah dibahas pada tutorial sebelumnya.

Baca Juga : Cara Menggunakan Pseudo-class Selectors Pada CSS

Mungkin Anda juga menyukai

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *