خوش آمدید

first-letter یک pseudo-element می باشد که اولین حرف از اولین خط در یک عنصر از نوع بلاک را انتخاب می کند.

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

ادامه مطلب

 

به عنوان مثال کد زیر اولین حرف از یک پاراگراف را به اندازه 100 پیکسل بزرگ و رنگش را به قرمز تبدیل می کند:

p::first-letter {
  font-size: 100px;
  color: red;
}

اگر عنصر مورد نظر دارای متنی باشد که از طریق before:: به آن اضافه شده باشد این انتخابگر حرف اول محتوای before:: را هدف قرار می دهد. به عنوان مثال داریم:

p::before {
  content: "My name is: ";
}

در اینجا انتخابگر حرف M را انتخاب می کند و محتوای خود عنصر پاراگراف برای آن اهمیت نخواهد داشت.

این انتخابگر بر روی اعداد هم اعمال می شود.

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

<p><br>First of all</p>

کاراکترهایی مثل نقل قول که به حرف اول می چسبند همراه همان حرف اول شامل انتخاب این انتخابگر می شوند تصویر زیر گویای مطلب است:

first-letter: یا first-letter::؟

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

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

 

 

 

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

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