first-line یک pseudo-element می باشد که اولین خط در یک عنصر از نوع بلاک را انتخاب می کند. با این انتخابگر خط اول یک عنصری که ویژگی display آن مقدار inline دارد را نمی توان انتخاب کرد بلکه عنصر مورد نظر حتما باید از نوع بلاک باشد یا به عبارت دیگر مقدار ویژگی display آن عنصر, یکی از مقادیر block, inline-block,list-item ,table-cell, table-caption باشد مثل عنصر پاراگراف.

ادامه مطلب

 

مقدار متن در خط اول به چندین عامل مثل عرض صفحه و اندازه فونت و غیره بستگی دارد.

به عنوان مثال کد زیر خط اول یک پاراگراف را به رنگ زرد با پس زمینه مشکی تبدیل می کند و همینطور آن را زیرخط دار می کند:

p::first-line {
  color: #ff0;
  background-color: #000;
  text-decoration: underline;
}

first-line بر روی خط اول اعمال می شود پس اگر محتوای عنصری با تگ br شروع شود از آنجایی که خط اول در آن عنصر خالی خواهد بود پس عملکرد این انتخابگر آن چیزی که انتظار می رود نخواهد بود. به عنوان مثال در عبارت زیر خط اول انتخاب نمی شود.

<p><br>متن خط اول </p>

همه مرورگرها هر دو روش نوشتن را پشتیبانی می کنند اما IE8 فقط : را پشتیبانی می کند. توجه داشته باشید که استفاده از :: در CSS3 معرفی شد و استاندارد امروزه می باشد.

بر روی این انتخابگر ویژگی هایی نظیر پس زمینه, حاشیه ها, فاصله های داخلی و خارجی و برخی از ویژگی های فونت و متن اعمال می شود. مثال زیر را بررسی کنید:

 

 

پشتیبانی مرورگرها

انتخابگر first-line:: در مرورگرهای کروم, فایرفاکس, اپرا و اینترنت اکسپلورر +9 و همچنین در اندروید و iOS کار می کند.

یک باگ قدیمی در مرورگر کروم وجود دارد که اجازه اعمال ویژگی text-transform را با استفاده از این انتخابگر به خط اول نمی دهد.