مرجع CSS فارسی

PSEUDO-CLASS

first-letter::

first-letter::

شبه عنصر ی است که اولین کاراکتر متنی را در یک بلاک (مثل <p>) انتخاب می کند. به شرطی که توسط محتواهای دیگر مثل تصاویر یا جداول ایجاد نشده باشد.

شبه عنصر first-letter:: در بلاک های متنی که به صورت ” inline ” در حال نمایش هستند کار نمی کند. فقط در بلاک هایی که با (display) حالت نمایش، block ، inline-block ، table-cell ، table-caption و list-item قابل اجرا هستند. 

اگر متنی توسط خصوصیت content یک شبه عنصر before:: به ابتدای یک پاراگراف افزوده شده باشد . در این صورت شبه عنصر first-letter:: ، اولین کاراکتر ایجاد شده توسط عنصر انتزاعی before:: را انتخاب می کند. برای مثال اگر به ابتدای یک پاراگراف با before:: متنی افزوده باشیم :

p:before {
    content: "Note: ";
}

selector (انتخابگر) p:first-letter کاراکتر ” N ” از ” Note ” را اتخاب می کند. حتی اگر در پاراگراف متن دیگری نیز وجود داشته باشد.

first-letter: اولین کاراکتر حتی کاراکتر های عددی را انتخاب میکند بعنوان مثال ” 2 ” را از ” 25cat ” انتخاب می کند.

توجه داشته باشید که حتما می بایست در خط اول کاراکتری وجود داشته باشد تا توسط first-letter: قابل انتخاب شدن باشد:

<p><br>First level of...&ly;/p>

در مثال فوق ، خط اول هیچ کاراکتری را شامل نمی شود و با یک تگ <br> خط اول خالی گذاشته شده است . با این حساب انتخابگر first-letter: هیچ کاراکتری را شامل نمی شود.

خصوصیاتی که برای first-letter:: استفاده می شوند.

تعداد محدودی از خصوصیات CSS را میتوان برای شبه عنصر first-letter:: استفاده کرد ، که لیست کاملی از آن ها را معرفی میکنیم :

  • خصوصیات مربوط به فونت ، font-style ، font-variant ، font-weight ، font-size ، line-height و البته font-family
  • text-decoration ، text-transform ، letter-spacing ، word-spacing ، float ، vertical-align و color
  • خصوصیات margin : مثل ، margin ، margin-left ، margin-right ، margin-top ، margin-bottom
  • خصوصیات padding: مثل ، padding، padding-left ، padding-right ، padding-top ، padding-bottom
  • خصوصیات border : مثل border ، border-width ، border-style ، border-color
  • خصوصیات background : مثل background ، background-color ، background-image ، background-position ، background-repeat  ، background-size و background-attachment

نکات دیگر

اگر یک آیتمی به عنوان لیست با حالت نمایش (display: list-item) داشته باشیم ، first-letter: اولین کاراکتر متنی بعد از bullet ( آیکونی که به صورت مربع یا دایره قبل از آیتم های لیست قرار میگیرد ) و یا شمارنده ی لیست در لیست های مرتب را انتخاب می کند.

بعضی از مرورگر ها first-letter: را برای آیتم های لیست با خصوصیت list-style-position : inside نادیده می گیرند .

متناسب با سایر شبه عناصر و شبه کلاس ها ، first-letter:: می تواند با سایر شبه کلاس ها و شبه عنصر ها ترکیب شوند.

/* old CSS2 syntax */
.element:first-letter {
    /*  styles here */
}

/* new CSS3 syntax */
.element::first-letter {
    /*  styles here */
}
تفاوت بین first-letter: و first-letter::

حتما راحت ترید که از یک “دو نقطه” به جای دو “دونقطه” استفاده کنید. در CSS1 و CSS2 برای شبه عناصر از یک”دونقطه” استفاده می شد(شبیه به کلاس های انتزاعی pseudo-classes مانند hover: ) . در CSS3 برای ایجاد تفاوت شبه عناصر از شبه کلاس ها ، از دو “دونقطه” برای شبه عناصر استفاد شد. تمام مرورگر هایی که ورژن قبلی را ساپورت میکنند ، ورژن جدید (first-letter::) را نیز ساپورت می کنند(به جز حضرت Internet Explorer 8 😉 ).

در تمام دمو های استفاده شده در این بخش از first-letter: استفاده کردیم برای پوشش دادن همه ی مرور گرها.

/* old CSS2 syntax */
p:first-letter {
    /* content and styles here */
}

/* new CSS3 syntax */
p::first-letter {
    /* content and styles here */
}

دموی زیر مثال هایی از کاربرد first-letter:: در CSS می باشد.

See the Pen ::first-letter در CSS مثال by alishooti (@alishooti) on CodePen.

ساپورت مرورگر

first-letter:: با دو”دونقطه” در کروم ،فایرفاکس ،سافاری ،اپرا ،اینترنت اکسپلورر +9 و اندروید وآی او اس ، ساپورت می شود.

بیشتر بخوانید

 

استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .

همچنین منتظر دیدگاه های شما هستیم.

(Visited 14 times, 1 visits today)

Submit a Comment