Select Page

مرجع CSS فارسی

PSEUDO-CLASS

first-line::

first-line::

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

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

مقدار متنی که توسط این شبه عنصر انتخاب می شود بسته به فاکتورهایی از قبیل ، عرض نمایشگر ، اندازه ی فونت متن و … متفاوت خواهد بود.

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

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

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

نکات دیگر

در مثال زیر ، هر دو المان div و p به صورت بلاک نمایش داده می شوند . و انتخابگر first-line:: برای المان div ، خط اول متن نوشته شده داخل المان p را نیز شامل می شود . که به مفهوم پیروی از یک ساختار درختی و نسل گونه است.

<div>
    <p>This line...</p>
</div>
                

اولین خط یک المان table-cell یا یک المان inline-block به عنوان اولین خط والد خود (المان پدر خود) محسوب نمی شود. پس در مثال زیر اولین خط div واژه ی hello نیست.

<div>
    <p style="display: inline-block">
        Hello
        <br>
        Goodbye
    </p> 
    etcetera
</div> 
                

همچنبن در مثال زیر، اولین خط المان p  هیچ کاراکتری متنی را شامل نمی شود. (با توجه به نحوه ی نمایش معمول <br>). واژه ی First بعنوان اولین خط محسوب نشده و فقط فضایی خالی به عنوان اولین خط در نظر گرفته می شود.

<p><br>First...</p> 
                
وراثت و ویژگی های فردی

با توجه به مقوله ی وراثت در CSS ، بخشی از المان فرزند که در خط اول قرار می گیرد ، تنها از مقادیری ارث بری می کند که میتوان به شبه عنصر first-line:: مقدار دهی کرد. سایر مقادیر از والد غیر شبه عنصر ارث دهی می شوند.(بخشی از فرزند که در جزو خط اول نیست به صورت معمول از والد خود ارث بری می کند.)

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

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

<p class="text" id="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non modi aspernatur accusamus repudiandae atque suscipit dolorem rerum. Iure explicabo repellendus magnam quisquam porro vitae quibusdam quam maiores fugiat! Enim, sed.
</p>
                
/* General type (tag) selector */
p {
    text-transform: lowercase;
}

/* Class selector */
.text {
    text-transform: lowercase;
}

/* ID selector */
#text {
    text-transform: lowercase;
}

/* ID selector with !important bash */
#text {
    text-transform: uppercase !important;
}
                

تکه کد زیر همه ی استایل هایی که در فوق وجود دارد را خنثی می کند و استایل خودش را اعمال می کند. 

p::first-line {
    tetx-transform: uppercase;
}
                
تفاوت بین first-line: و first-line::

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

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

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

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

مثالی از متصل کردن شبه عناصر first-line:: با سایر شبه عتاصر .

/* chaining ::first-line with the :first-of-type selector */
p:first-of-type::first-line {
    text-transform: uppercase;
    font-weight: bold;
}
                

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

See the Pen :first-line by alishooti (@alishooti) on CodePen.0

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

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

نکته ی دیگری که در این مورد وجود دارد ، وجود یک ایراد است در مرورگر کروم که اجازه ی اعمال text-transform را به شبه عنصر first-line:: نمی دهد. 

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

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