::first-letteradalah elemen pseudo yang memungkinkan Anda untuk mengatur gaya huruf pertama dalam elemen, tanpa perlu menempelkan tag di sekitar huruf pertama dalam HTML Anda. Meskipun tidak ada tag yang ditambahkan ke DOM, seolah-olah huruf pertama yang ditargetkan tercakup dalam sebuah tag. Anda dapat mengatur gaya huruf pertama itu seperti yang Anda lakukan pada elemen nyata dengan:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Hasilnya seolah-olah Anda memiliki elemen palsu di sekitar huruf pertama:
The first letter is bold and red.
Huruf pertama dicetak tebal dan berwarna merah
- Elemen pseudo hanya berfungsi jika elemen induk adalah kotak penampung blok (dengan kata lain, ini tidak berfungsi pada huruf pertama
display: inline;elemen.) - Jika Anda memiliki a
::first-letterdan::first-linepada sebuah elemen, huruf pertama akan mewarisi dari gaya baris pertama, tetapi gaya di::first-letterakan menimpa ketika gaya konflik. - Jika Anda membuat konten dengan
::before, huruf pertama atau karakter tanda baca, apakah itu bagian dari node teks asli atau dibuat dengan konten yang dihasilkan, akan menjadi target.
Informasi Lebih Lanjut
- Saat menggunakan untuk huruf besar-kecil, gunakan dalam hubungannya dengan
p:first-of-typesehingga tidak setiap huruf pertama diberi gaya - Contoh Pena - dengan Konten yang Dihasilkan
- Wiki W3C
- Modul Pemilih W3C CSS3
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 | 5.0-5.1 |
Catatan: Untuk Internet Explorer 8 dan versi lebih lama, gunakan satu titik dua :first-lettersebagai ganti notasi titik dua ganda.