CSS – Mengenal Pseudo-Element di CSS Bag.2 (:first-letter)

Bintaro – Ngelanjutin tulisan sebelumnya mengenai Pseudo-Element/Class, sekarang gw mau nerusin yang belum ketulis kemaren yaitu untuk selektor :first-letter. Kegunaan :first-letter selektor disini adalah untuk membuat style karakter pertama dalam suatu selektor yang ditempeli selektor :first-letter.

:first-letter Pseudo-Element selector

Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar Jajan di pasar

Nah hurup atau karakter pertama contoh diatas itu contoh kegunaan selektor :first-letter. Sebelum nongol ini selektor, dulu2 gw itu gunain <span> untuk kasi style di hurup depan. Berikut script css dan html yg gw jadiin contoh diatas itu

CSS contoh diatas

Pseudo Element :first-letter itu nempel di TAG p

Contoh itu gw pake dengan nempelin Pseudo-Element :first-letter selektor di HTML Element ‘p‘, akan tetapi :first-letter selektor itu bisa dipake juga untuk ditempel di Attribut ID ( # ) ataupun CLASS ( . ) Misalnya: #namaId:first-letter Contoh <div id=”namaId”>ini untuk :first-letter di attribut ID</div> dan .namaClass:first-letter Contoh <div class=”namaClass”>ini untuk :first-letter di attribut CLASS</div>

CSS Properties yg bisa digunain di Pseudo-Element :first-letter selektor ini adalah font, color, background, margin, padding, border, text-decoration, vertical-align, text-tansform, line-height, float, clear.

Yup.. Sekian dan terima kasih dulu untuk bagian kedua pseudo-element mengenai selektor :first-letter, nanti disambung lagi sama selektor yg belum ketulis. Semoga Bermanfaat 😉

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.