العنصر ‎::first-line

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
العنصر الزائف ‎::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 مع هذا العنصر الزائف:

أمثلة

مثال عن استخدام هذا العنصر الزائف لتحديد أول سطر لجميع العناصر:
<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

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