::first-letteradalah elemen semu yang membolehkan anda menggayakan 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 disasarkan dimasukkan dalam tag. Anda boleh menggayakan huruf pertama seperti yang anda mahukan dengan elemen sebenar dengan:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Hasilnya seolah-olah anda mempunyai unsur palsu di sekitar huruf pertama:
The first letter is bold and red.
Huruf pertama berwarna tebal dan merah
- Elemen pseudo hanya berfungsi jika elemen induk adalah kotak bekas blok (dengan kata lain, ia tidak berfungsi pada huruf pertama
display: inline;elemen.) - Jika anda mempunyai kedua-dua
::first-letterdan::first-linepada unsur, surat pertama akan mewarisi sebahagian gaya baris pertama, tetapi gaya pada::first-letterakan menulis ganti apabila gaya konflik. - Sekiranya anda menghasilkan kandungan
::before, huruf pertama atau watak tanda baca, sama ada itu adalah bahagian simpul teks asal atau dibuat dengan kandungan yang dihasilkan, akan menjadi sasarannya.
Maklumat lanjut
- Semasa menggunakan drop-caps, gunakan bersama-sama
p:first-of-typeagar tidak setiap huruf pertama digayakan - Contoh Pena - dengan Kandungan yang Dihasilkan
- W3C Wiki
- Modul Pemilih W3C CSS3
Sokongan Penyemak Imbas
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 3 | 5.0-5.1 |
Catatan: Untuk Internet Explorer 8 dan ke bawah, gunakan titik dua :first-letterdan bukannya notasi dua titik.