العنصر ‎::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>سيتم تطبيق الأنماط فقط على السطر الأول من هذه الفقرة.
بعد ذلك ، سيتم تنسيق جميع النصوص مثل وضعها الطبيعي. هل تفهم ما اعني؟</p>

<span>لن يتلقى السطر الأول من هذا النص نمطًا خاصًا
لأنه ليس عنصر مستوى الكتلة.</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

انظر أيضًا

  • صفحة الصنف الزائف first-letter:: الذي يؤدي إلى تطبيق الأنماط على أوّل حرف من أوّل سطر من العناصر الكتلية (block-level elements)، شرط ألّا يسبقها محتوى آخر (مثل الصور أو الجداول السطرية).

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