Halo teman-teman pada kesempatan kali ini, saya akan mengenalkan penggunaan :first-letter apda Pseudo-Class dalam CSS.

:first-letter pada pseudo-class adalah pseudo-elemen yang memilih huruf pertama dibaris pertama dari element block (seperti paragraf “<p>”). :first-letter pada pseudo element tidak akan memilih element yang memiliki inline-level element, yaitu unsur atau element yang memiliki display: inline. Dan hanya akan memilih huruf pertama pada element yang memiliki display:inline-block, table-cell, table-caption, atau list-item.

Jika elemen memiliki beberapa konten teks yang dimasukkan pada awalnya menggunakan :: before pseudo-elemen dengan properti konten, maka huruf pertama dari konten yang dihasilkan akan menjadi surat ditargetkan oleh :: first-letter. Sebagai contoh, jika sebuah paragraf telah konten yang ditambahkan ke dalamnya menggunakan aturan berikut:

Selector P:first-letter akan cocok dengan “N” dari “Note”, bahkan jika paragraf tersebut memiliki teks lain didalamnya. :first-letter juga memilih yang berlaku jika huruf pertama sebenarnya adalah angka, misalnya angka “2” pada text “22 musang”. Huruf pertama harus terjadi pada baris diformat pertama, misalnya di markup ini:

Ada beberapa properties yang dapat digunakan untuk style :first-letter:

Hanya sebagian dari sifat CSS dapat digunakan untuk style :: first-letter sifat ini:

  • Properti Font: font, font-style, font-variant, font-weight, font-size, line-height, dan font-family.
    text-decoration, text-transform, letter-spacing, spacing-spacing (jika diperlukan), float, vertical-align, dan color.
  • Sifat Padding & Margin: margin, margin-top, margin-right, margin-bottom, dan margin-left.
    padding: padding, padding-top, padding-right, padding-bottom, dan padding-left
  • Sifat perbatasan: border, border-width, border-style, border-color, dan sifat tulisan tangan yang sesuai untuk masing-masing sifat ini.
  • Latar belakang properti: background, background-color, background-image, background-position, background-repeat, background-size, dan background-attachment.

Catatan

Jika elemen adalah sebuah daftar atau list (display: list-item),: first-letter akan berlaku untuk huruf pertama dalam kotak utama setelah penanda. Agen pengguna dapat mengabaikan: pertama-surat pada daftar item dengan list-style-position: inside.

Beberapa bahasa mungkin memiliki aturan khusus tentang bagaimana memperlakukan kombinasi huruf tertentu. Di Belanda, misalnya, jika kombinasi huruf “ij” muncul di awal kata, kedua surat harus dipertimbangkan dalam :: pertama huruf pseudo-element.
Huruf pertama dari sel meja atau inline-block tidak bisa huruf pertama dari elemen leluhur. Misalnya, dalam markup berikut:

Huruf pertama yang akan berpengaruh :first-letter pada <div> adalah huruf ” H “. Semoga bermanfaat.