cssblog.ir logo
S

first-line

انتخاب‌گر اولین خط متن در زبان CSS

شبه‌عنصری برای مخصوص انتخاب خط اول عناصر وجود دارد که پس از استفاده از آن می توان به خط اول عناصر برخی استایل‌ها را اعمال نمود

شبه عنصر ::first-line برای تنظیم استایل های مختلف روی خط اول عنصر می باشد. مثلا ما می خواهیم رنگ خط اول یک متن را تغییر دهیم یا سایز فونت آن را درشت تر کنیم، برای این چنین کارهایی می توانیم از این شبه عنصر استفاده کنیم. مانند:

نکته قابل توجه این است که خط اول به این معنی است که با اولین شکستن خطی که روی آن متن رخ می دهد، مابقی متن دیگر جز اولین خط انتخاب نمی شود و این بررسی در تمام سایزها انجام می شود (نه فقط یک سایز پنجره) به این معنی که اگر طراحی شما رسپانسیو باشد و میزان فضای متن مادام تغییر کند، قسمت انتخاب شده برای خط اول نیز مادام تغییر خواهد کرد.

پس به خاطر داشته باشید که خط اول به سایز فونت (font-size)، فاصله حروف (letter-spacing)، فاصله واژه ها (word spacing)، سایز پنجره (viewport-width) بستگی خواهد داشت.

مشخصه های قابل استفاده برای first-line::

p::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: ...
    */
}

لیست فوق از css-tricks نقل شده است

الویت first-line:: از تمام سلکتورها بیشتر است، حتی با داشتن important!

در مثال های زیر مشاهده می کنید که الویت سلکتوری که در آن از ::first-line استفاده شده از مابقی سلکتورها، حتی آنهایی که دارای !important هستند، بیشتر است. دلیل رخ دادن این رفتار این است که همانطور که گفته شد ::first-line یک شبه عنصر است و رفتار آن مانند یک عنصر فرزند خواهد بود.

 در مثال فوق که به نقل از css-tricks بیان شده است مشاهده می‌نمائید که با اینکه تمام پاراگراف‌ها دارای رنگ تعریف شده مخصوص خود می‌باشند اما بازهم سلکتور ::first-line تاثیر خود را روی خط اول این پاراگراف‌ها گذاشته است. 

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند