CSS – Mengenal Pseudo-Element di CSS Bag.3 (:first-line & :first-child)

Pamulang – Lanjut lagi ke penjelasan penggunaan Pseudo-Element lanjutan. Disini gw mau bahas selektor :first-line & :first-child.. Ga perlu dijabarin lagi kan mengenain apa itu Pseudo-Element? Atau biar enak baca pembukaan tulisan tentang Pseudo-Element yg udah gw tulis DISINI dan lanjutannya bagian 2 DISINI.

:first-line Pseudo Element Selector..

Digunakan untuk memberi style di baris pertama  selektor yang dikasih :first-line selektor ini.. Contoh:

My name is Mas Wahyu Anshori, 28 years old. I am a student from STIE Ahmad Dahlan Jakarta, work at Seratus Company since Oct 2012. Before I came to Seratus Company, I was doing web content at Melodia Group and be part of 2313 Management as a web developer. I was also a freelance web developer with simple HTML, CSS base, and jQuery. Learned HTML and CSS base (with a help of Google) by myself would be my achievement so far. I’am an Indonesian football junkie, as well as addicted to HTML, CSS and jQuery coding.

Bisa diliat di contoh itu, cuma baris pertama yg ada stylenya.. padahal itu masih satu selektor di selektor P.. Ini CSS contoh diatas..

Dan CSS property yg bisa digunakan itu font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear. Dan yang patut dicatat, penggunaan :first-line ini juga bisa digunakan di selektor lain yah. Bukan hanya bisa digunakan di selektor P doang.. Misal #namaID:first-line, .namaCLASS:first-line, h1:first-line, de el el…


:first-child Pseudo Element Selector..

Digunakan untuk membuat style di setiap elemen pertama di dalam suatu elemen utama.. Misalnya..

div p:first-child

<div>
<p>ini element P PERTAMA dari element utama DIV</p>
<p>ini element P kedua dari element utama DIV</p>
<p>ini element P ketiga dari element utama DIV</p>
</div>

p:first-child strong {font-size:200%;}

<p>ini style P pertama yg dikasih STRONG setiap ada tag HTML <strong>strong</strong> dan pasti beda ukuran hurufnya</p>
<p>ini style P kedua yg dikasih STRONG setiap ada tag HTML <strong>strong</strong> dan ga akan beda ukuran hurufnya, karena ini bukan selektor pertama P yg dikasi style beda ukuran huruf</p>

Udah paham sampe situ? ok, langsung ke contoh realnya..

ini element P PERTAMA dari element utama DIV

ini element P kedua dari element utama DIV

ini element P ketiga dari element utama DIV

CSS..

HTML..

Di contoh itu paragraf pertama dari div yg gw kasih nama first-child gw kasih style background merah.. itu penjelasan dari Pseudo Element #first-child p:first-child dan kalo diperhatikan di paragraf pertama tersebut DIV nya hurufnya besar kan? tapi kenapa paragraf yang lain ga ikut besar? itu penjelasan atau contoh dari #first-child p:first-child strong.. Yang artinya.. selektor strong (strong) dari element utama div (#first-child) dari P yg dikasih Pseudo-Element (p:first-child) hurufnya gw kasih style 200%

Okeh.. itu penjelasan lanjutan Pseudo Element Selector :first-line n :first-child.. Semoga bermanfaat.. 😉

About the Author

Anshori Wahyu
My name is Mas Wahyu Anshori, 32 years old. I am a student from STIE Ahmad Dahlan Jakarta, work at Punakawan Digital Media since Oct 2017. Before I came to Punakawan, I was doing IT Supportt and web content at Seratus Company, Melodia Group and be part of Kehati as a freelance web developer. I was also a freelance web developer with simple HTML, CSS base, jQuery, and PHP. Learned Website Developer base (with a help of Google) by myself would be my achievement so far. I'am an Indonesian football junkie, as well as addicted to HTML, CSS and jQuery coding.

Be the first to comment on "CSS – Mengenal Pseudo-Element di CSS Bag.3 (:first-line & :first-child)"

Leave a Reply