::first-lineSözde öğesi bir elemanın birinci hattına stilleri uygulayarak içindir. Birkaç satır uzunluğunda bir paragraf düşünün (bunun gibi!). ::first-lineilk metin satırını biçimlendirmenize olanak tanır. Onu büyütmek için kullanabilir veya stilistik bir seçim olarak küçük harflerle ayarlayabilirsiniz. Bu sözde öğe tarafından hedeflenen metin miktarı, satır uzunluğu, görüntü alanı genişliği, yazı tipi boyutu, harf aralığı, sözcük aralığı gibi çeşitli faktörlere bağlıdır. Satır kesilir kesilmez, bundan sonraki metin artık seçilmez. Burada seçilen gerçek bir DOM öğesi (dolayısıyla "sözde" öğe) olmadığını unutmayın.
Bu sözde eleman blok düzeyi elemanları çalışır (zaman displayolarak ayarlanmışsa block, inline-block, table-caption, table-cell). Bir satır içi öğe üzerinde ayarlanmışsa, bu satır içi öğenin içinde satır sonu olsa bile hiçbir şey olmaz.
Ayrıca, içeren bir kural setinde tüm özelliklerin kullanılamayacağını unutmayın ::first-line. Çoğunlukla:
.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:… )Resmi CSS spesifikasyonu, Kullanıcı Temsilcilerine, isterlerse diğer özelliklere izin verebileceklerini söyler:
UA'lar diğer özellikleri de uygulayabilir.
Özgüllük ile ilgili bir kelime
Aşağıdaki demo, ::first-lineher türlü özgüllüğü nasıl geçersiz kılabileceğinizi gösterir !important.
- 1. parapgraf, etiket seçici aracılığıyla griye ayarlanır
- 2. parapgraf, bir sınıf seçici aracılığıyla griye ayarlanır
- 3. parapgraf bir kimlik seçici aracılığıyla griye ayarlanır
- 4. parapgraf,! Önemli bir bash aracılığıyla griye ayarlanmıştır.
Bunun nedeni, sözde öğenin, yalnızca ana öğenin bir parçası değil, bir alt öğe olarak ele alınmasıdır. Yani ona uyguladığınız kurallar sadece bunun içindir, ana kurallar ona kademeli olabilir.
Ayrıca, görüntü alanı genişliği değiştiğinde sözde öğenin nasıl davrandığını görmek için tarayıcınızı yeniden boyutlandırmayı deneyin.
Bu harika olsa bile: last-line veya: nth-line yoktur.
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Evet | Evet | Evet | 3.5+ (eski) 9+ | 5.5+ (eski) 9+ | Evet | Evet |
İtibaren ::first-linebir psödo-elemandır CSS2.1 belirtildiği gibi, bu iki nokta üst üste ile başlayan edilmelidir. Ancak bazı tarayıcılar yalnızca tek iki nokta üst üste sözdizimini destekler (Internet Explorer 5.5 - 9 ve Opera 3.5 - 9).