The ::first-linepseudo-elemen untuk menerapkan gaya ke baris pertama dari suatu unsur. Bayangkan sebuah paragraf yang panjangnya beberapa baris (seperti ini!). ::first-linememungkinkan Anda untuk mengatur gaya baris pertama teks itu. Anda dapat menggunakannya untuk membuatnya lebih besar atau mengaturnya dalam huruf kecil sebagai pilihan gaya. Jumlah teks yang ditargetkan oleh elemen semu ini bergantung pada beberapa faktor seperti panjang baris, lebar area pandang, ukuran font, spasi huruf, spasi kata. Begitu baris baru, teks setelah itu tidak lagi dipilih. Perhatikan bahwa tidak ada elemen DOM sebenarnya yang dipilih di sini (jadi, elemen "semu").
Ini pseudo-elemen hanya bekerja pada unsur-unsur blok-tingkat (ketika displaydiatur baik block, inline-block, table-caption, table-cell). Jika disetel pada elemen sebaris, tidak ada yang terjadi, meskipun elemen sebaris tersebut memiliki jeda baris di dalamnya.
Perhatikan juga bahwa tidak semua properti dapat digunakan dalam kumpulan aturan yang berisi ::first-line. Kebanyakan:
.element::first-line ( font-style:… font-variant:… font-weight:… font-size:… font-family:… line-height:… color:… word-spacing:… letter-spacing:… text-decoration:… text-transform:… background-color:… background-image:… background-position:… background-repeat:… background-size:… background-attachment:… )Spesifikasi CSS resmi memberi tahu Agen Pengguna dapat mengizinkan properti lain jika mereka mau:
UA juga dapat menerapkan properti lain.
Sebuah kata tentang kekhususan
Demo berikut menunjukkan bagaimana ::first-linedapat menimpa segala jenis kekhususan, bahkan !important.
- Parapgraf pertama disetel menjadi abu-abu melalui pemilih tag
- Parapgraph ke-2 disetel ke abu-abu melalui pemilih kelas
- Parapgraph ke-3 disetel ke abu-abu melalui pemilih ID
- Parapgraph ke-4 diatur menjadi abu-abu melalui! Important bash
Ini karena pseudo-element diperlakukan seperti elemen anak, bukan hanya bagian dari elemen induk. Jadi aturan yang Anda terapkan hanya untuk itu, aturan induk mungkin saja mengalir ke sana.
Selain itu, coba ubah ukuran browser Anda untuk melihat bagaimana perilaku pseudo-element saat lebar viewport berubah.
Tidak ada: baris terakhir atau: baris ke-n, meskipun itu akan keren.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Ya | Ya | Ya | 3,5+ (lama) 9+ | 5,5+ (lama) 9+ | Ya | Ya |
Karena ::first-linemerupakan elemen pseudo, ini harus diawali dengan dua titik dua seperti yang ditentukan dalam CSS2.1. Namun beberapa browser hanya mendukung sintaks titik dua (Internet Explorer 5.5 - 9 dan Opera 3.5 - 9).