Jika pembahasan mengenai pseudo class selector cukup membuat anda pusing, masih terdapat selector lain yang menggunakan nama ‘pseudo’. Yakni pseudo element selector. Apa itu Pseudo Element Selector di CSS Walaupun sama-sama menggunakan nama ‘pseudo’, Pseudo class dan pseudo element adalah berbeda. Pseudo element lebih fokus kepada menyeleksi ‘konten’ atau isi dari element dari pada struktur HTML. Pseudo element juga memiliki fitur ‘generated content’ dimana kita bisa menambahkan ‘sesuatu’ kedalam HTML menggunakan CSS.
Apa itu Pseudo Element Selector di CSS, Pseudo element sebenarnya telah ada sejak CSS 2.1, namun pada CSS3 format penulisannya sedikit berbeda. Pada CSS 2.1 penulisan pseudo element mirip dengan pseudo class, yakni menggunakan tanda titik dua: ‘ : ‘. Pada spesifikasi CSS3, penulisan pseudo element menggunakan dua buah tanda titik dua: ‘ :: ’. Ini dilakukan untuk membedakan antara pseudo class dengan pseudo element. Kali ini kita akan coba membahas 4 jenis pseudo element, jika tidak cukup bisa kita bagi lagi nanti ya teman-teman, apa saja:
- ::first-line
- ::first-letter
- ::before
- ::after
Pseudo Element Selector ::first-line
Sesuai dengan namanya, selector ::first-line digunakan untuk mengakses baris pertama dari sebuah element HTML. Langsung saja kita lihat contoh penggunaannya:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style><br>p::first-line{<br>color:green;<br>}<br></style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam dictum sapien nec elit volutpat pellentesque.
Vestibulum tristique justo ut eros iaculis, sit amet tempor luctus.
Quisque convallis sapien sit amet sem efficitur, at efficitur ornare.
</p>
<p>
Aliquam a lectus porta, bibendum enim id, dictum nunc. Duis
tinciduntsed turpis non suscipit. Nunc id mi molestie,
porta leo id, vulputate eros. Donec scelerisque vitae justo
finibus imperdiet.
</p>
</body>
</html>
Dapat anda lihat, baris pertama dari tag <p> akan berwarna hijau. Dan jika kita mengubah ukuran jendela web browser, style pada baris pertama juga akan disesuaikan. Bgaiamana teman-teman sepertinnya saya tidak bisa membahasnnya secara langsung disini ya teman-teman, akan coba saya bahas pada artikel selanjutnnya, oke cukup sampai disini dulu belajar kita tentang Apa itu Pseudo Element Selector di CSS, semoga bermanfaat terimakasih.
The post Apa itu Pseudo Element Selector di CSS appeared first on Kursus Website Terbaik.