CSS/::first-line

العنصر الزائف ‎::first-line‎ في CSS (أي pseudo-element) يؤدي إلى تطبيق الأنماط على أوّل سطر من العناصر الكتلية (block-level elements)، لاحظ أنَّ طول أوّل سطر يختلف تبعًا لعدة عوامل بما في ذلك عرض العنصر وعرض المستند وحجم الخط.

p::first-line {
  color: red;
}

الشكل العام لهذا المحدد:

::first-line
:first-line

لاحظ أنَّ CSS3 أضافت الشكل ‎::first-line (لاحظ أنَّ قبله زوجين من النقط الرأسية) لتمييز العناصر الزائفة (pseudo-elements) عن الأصناف الزائفة (pseudo-classes)؛ لكن المتصفحات تقبل الشكل ‎:first-line المُضاف في CSS2 أيضًا.

لا يسمَح إلا باستخدام مجموعة جزئية من خاصيات CSS مع هذا العنصر الزائف:

• جميع خصائص الخطوط: font و font-style و font-feature-settings و font-kerning و font-language-override و font-stretch و font-synthesis و font-variant و font-variant-alternates و font-variant-caps و font-variant-east-asian و font-variant-ligatures و font-variant-numeric و font-variant-position و font-weight و font-size و font-size-adjust و line-height و font-family.
• جميع خاصيات الخلفيات: background و background-color و background-image و background-clip و background-origin و background-position و background-repeat و background-size و background-attachment و background-blend-mode.
• الخاصية color.
• الخاصيات: text-decoration و text-shadow و text-transform و letter-spacing و word-spacing و line-height و text-decoration-color و text-decoration-line و text-decoration-style و vertical-align.

أمثلة

مثال عن استخدام هذا العنصر الزائف لتحديد أول سطر لجميع العناصر:

<p>Styles will only be applied to the first line of this paragraph.
After that, all text will be styled like normal. See what I mean?</p>

<span>The first line of this text will not receive special styling
because it is not a block-level element.</span>

شيفرة CSS:

::first-line {
  color: blue;
  text-transform: uppercase;


  /* تحذير! لا تستعمل هذه الخاصيات لأنها غير صالحة مع هذا العنصر الزائف */
  margin-left: 20px;
  text-indent: 20px;
}

دعم المتصفحات

الميزة	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

مصادر ومواصفات

• مسودة CSS Pseudo-Elements Level 4.
• مواصفة CSS Text Decoration Module Level 3.
• مواصفة Selectors Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.