Cara menggunakan what is php pseudo

Pada bagian sebelumnya kita sudah menjelaskan apa itu pseudo class :target pada CSS3 sekarang kita akan melanjutkan dengan melihat contoh sederhana bagaimana cara menggunakan pseudo class :target. Misalnya saya sudah punya halaman HTML sederhana dimana didalam bodynya saya punya 3 buah elemen

sebagai berikut

nah sekarang misalnya salah satu elemen tersebut memiliki sebuah id yang unik dengan nama paragraf seperti berikut

dan sekarang jika teman teman tambahkan sebuah style CSS yang isinya seperti berikut

yang artinya jika ada id apapun yang ditargetkan maka saya akan berikan backgound salmon dan warna tulisan menjadi putih. Saya simpan lalu saya jalankan maka browsernya tidak terjadi apa-apa. Tapi lihat ketika saya tambahkan #paragraf pada bagian URI

maka CSS akan diaktifkan. Hasilnya seperti ini

Jadi maksud dari :target adalah elemen apapun yang idnya ditargetkan melalui URI maka CSSnya akan aktif yakni backgroundnya akan menjadi warna salmon.

Pseudo element ::before dan ::after digunakan untuk membuat element semu [pseudo] dengan posisi sebelum dan sesudah content dari element yang ditargetkan, dikatakan semu karena element ini tidak benar-benar ada dalam struktur html, namun tetap akan digenerate oleh browser sehingga akan tetap tampak, namun ketika kita lihat source nya [view source], kita tidak akan menemukannya, meski semu, penggunaan element ini benar-benar sama seperti element real lainnya.

Dalam struktur html yang di generate oleh browser [misal: chrome], posisi kedua element ini tampak seperti contoh berikut:

Contoh CSS Rule:

.fb::before {
	/* Isi Style */
}	
.fb::after {
	/* Isi Style */
}

Kode HTML:

Posisi dalam struktur DOM:

Kunjungi profil lengkap kami di Facebook