09902090383

09337734689

info@webbyme.com

تهران، خیابان شریعتی، خیابان معلم

resume.webbyme.ir

تلگرام طراحی سایت وب من

09902090383

09127363007

Top

آشنایی با شبه کلاس first-letter::

::first-letter Pseudo Class

آشنایی با شبه کلاس first-letter::


first-letter::

first-letter:: یک شبه کلاس است که به شمااین امکان را می دهد تا به اولین حرف هر عنصر استایل بدهید، با این روش ابتدای متن را تغییر می دهید بدون اینکه از تگ <span> استفاده کنید و یا تگی به سند HTML ( DOM ) اضافه کنید. نحوه کارکرد این شبه کلاس مثل این است که ابتدای متن از تگ <firstletter> استفاده کنید. در مثال زیر با استفاده از first-letter:: مثل یک المان جداگانه به اولین حرف استایل دادیم:

CSS


p::first-letter {
font-weight: bold;
color: red;
}

HTML


<p>
The first letter is bold and red
</p>

نتیجه عملکرد first-letter:: به صورت زیر خواهد بود:

Faux HTML


<firstletter>T</firstletter>
he first letter is bold and red
</p>

The first letter is bold and red

وقتی از این شبه کلاس استفاده می کنید دقت کنید:

  1. این شبه کلاس تنها در صورتی کار می کند که المان والد در یک تگ block باشد به عبارت دیگر در ابتدای حرفی المانی کهdisplay:inline;داشته باشد کار نمی کند.
  2. اگر روی یک المان first-letter:: و first-line:: داشته باشیم ابتدای حرف( first letter ) استایل ابتدای خط( first line ) را به ارث خواهد برد اما استایل هایی که در first-letter:: است زمانی که ناسازگار باشند بازنویسی می شوند.
  3. اگر محتوایی با before::ایجاد شود، اولین حرف یا کاراکتر تاکیدی چه بخشی از متن اصلی باشد چه با محتوای ایجاد شده ساخته شده باشد مورد هدف خواهد بود.

اطلاعات بیشتر

 

Example Pen – with Generated Content

W3C Wiki

W3C CSS3 Selectors module

مقالات مرتبط

pseudo-class

استفاده از المان والد در CSS

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

نکته:

در IE8 و پایین تر به جای استفاده first-letter:: از first-letter: استفاده کنید

Chrome Safari Firefox Opera IE Android iOS
+1 +1 +1 +3.5 5.5 All All
هیچ نظری وجود ندارد

ارسال نظر

CommentLuv badge