عرض مصدر CSS/::first-line

<noinclude>{{DISPLAYTITLE: العنصر <code>‎::first-line</code>‎}}</noinclude>
العنصر الزائف <code>‎::first-line</code>‎ في CSS (أي pseudo-element) يؤدي إلى تطبيق الأنماط على أوّل سطر من العناصر الكتلية (block-level elements)، لاحظ أنَّ طول أوّل سطر يختلف تبعًا لعدة عوامل بما في ذلك عرض العنصر وعرض المستند وحجم الخط. <syntaxhighlight lang="css">
p::first-line {
  color: red;
}
</syntaxhighlight>الشكل العام لهذا المحدد:<syntaxhighlight lang="css">
::first-line
:first-line
</syntaxhighlight>لاحظ أنَّ CSS3 أضافت الشكل <code>‎::first-line</code> (لاحظ أنَّ قبله زوجين من النقط الرأسية) لتمييز العناصر الزائفة (pseudo-elements) عن الأصناف الزائفة (pseudo-classes)؛ لكن المتصفحات تقبل الشكل <code>‎:first-line</code> المُضاف في CSS2 أيضًا. 

لا يسمَح إلا باستخدام مجموعة جزئية من خاصيات CSS مع هذا العنصر الزائف:
* جميع خصائص الخطوط: <code>[[CSS/font|font]]</code> و <code>[[CSS/font-style|font-style]]</code> و <code>font-feature-settings</code> و <code>[[CSS/font-kerning|font-kerning]]</code> و <code>font-language-override</code> و <code>[[CSS/font-stretch|font-stretch]]</code> و <code>font-synthesis</code> و <code>font-variant</code> و <code>font-variant-alternates</code> و <code>font-variant-caps</code> و <code>font-variant-east-asian</code> و <code>font-variant-ligatures</code> و <code>font-variant-numeric</code> و <code>font-variant-position</code> و <code>[[CSS/font-weight|font-weight]]</code> و <code>[[CSS/font-size|font-size]]</code> و <code>[[CSS/font-size-adjust|font-size-adjust]]</code> و <code>[[CSS/line-height|line-height]]</code> و <code>[[CSS/font-family|font-family]]</code>.
* جميع خاصيات الخلفيات: <code>[[CSS/background|background]]</code> و <code>[[CSS/background-color|background-color]]</code> و <code>[[CSS/background-image|background-image]]</code> و <code>[[CSS/background-clip|background-clip]]</code> و <code>[[CSS/background-origin|background-origin]]</code> و <code>[[CSS/background-position|background-position]]</code> و <code>[[CSS/background-repeat|background-repeat]]</code> و <code>[[CSS/background-size|background-size]]</code> و <code>[[CSS/background-attachment|background-attachment]]</code> و <code>[[CSS/background-blend-mode|background-blend-mode]]</code>.
* الخاصية <code>[[CSS/color|color]]</code>.
* الخاصيات: <code>[[CSS/text-decoration|text-decoration]]</code> و <code>[[CSS/text-shadow|text-shadow]]</code> و <code>[[CSS/text-transform|text-transform]]</code> و <code>[[CSS/letter-spacing|letter-spacing]]</code> و <code>[[CSS/word-spacing|word-spacing]]</code> و <code>[[CSS/line-height|line-height]]</code> و <code>[[CSS/text-decoration-color|text-decoration-color]]</code> و <code>[[CSS/text-decoration-line|text-decoration-line]]</code> و <code>[[CSS/text-decoration-style|text-decoration-style]]</code> و <code>[[CSS/vertical-align|vertical-align]]</code>.

== أمثلة ==
مثال عن استخدام هذا العنصر الزائف لتحديد أول سطر لجميع العناصر:<syntaxhighlight lang="html">
<p>سيتم تطبيق الأنماط فقط على السطر الأول من هذه الفقرة.
بعد ذلك ، سيتم تنسيق جميع النصوص مثل وضعها الطبيعي. هل تفهم ما اعني؟</p>

<span>لن يتلقى السطر الأول من هذا النص نمطًا خاصًا
لأنه ليس عنصر مستوى الكتلة.</span>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
::first-line {
  color: blue;
  text-transform: uppercase;


  /* تحذير! لا تستعمل هذه الخاصيات لأنها غير صالحة مع هذا العنصر الزائف */
  margin-left: 20px;
  text-indent: 20px;
}
</syntaxhighlight>
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي (‎:first-line)
|1.0
|1.0
|5.5
|3.5
|1.0
|-
!‎::first-line
|1.0
|1.0
|9.0
|7.0
|1.0
|}
==مصادر ومواصفات==
* مسودة [https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo CSS Pseudo-Elements Level 4]. 
* مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-shadow CSS Text Decoration Module Level 3].
* مواصفة [https://drafts.csswg.org/selectors-3/#first-line Selectors Level 3].
* مواصفة [http://www.w3.org/TR/CSS2/selector.html#first-line-pseudo ‎CSS Level 2 (Revision 1)‎].
* مواصفة [http://www.w3.org/TR/CSS1/#the-first-line-pseudo-element CSS Level 1].
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Selectors|{{SUBPAGENAME}}]]
[[تصنيف:CSS pseudo-element|{{SUBPAGENAME}}]]