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

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
العنصر الزائف ‎::first-letter‎ في CSS (أي pseudo-element) يؤدي إلى تطبيق الأنماط على أوّل حرف من أوّل سطر من العناصر الكتلية (block-level elements)، شرط ألّا يسبقها محتوى آخر (مثل الصور أو الجداول السطرية).
p::first-letter {
  font-size: 130%;
}
لاحظ أنَّه لا يسهل تحديد أوّل حرف من العنصر دومًا:
  • بعض علامات الترقيم التي تسبق أو تلي أوّل حرف مباشرةً ستدخل في هذا العنصر الزائف.
  • استخدام العنصر الزائف ‎::before مع الخاصية content سيؤدي إلى إضافة بعض النصوص قبل بداية العنصر، وفي هذه الحالة سيُطابِق العنصر الزائف ‎::first-letter‎ أوّل حرف من المحتوى المولَّد.
الشكل العام لهذا المحدد:
::first-letter
:first-letter
لاحظ أنَّ CSS3 أضافت الشكل ‎::first-letter (لاحظ أنَّ قبله زوجين من النقط الرأسية) لتمييز العناصر الزائفة (pseudo-elements) عن الأصناف الزائفة (pseudo-classes)؛ لكن المتصفحات تقبل الشكل ‎:first-letter المُضاف في CSS2 أيضًا.

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

أمثلة

مثال عن استخدام هذا العنصر الزائف لتحديد أوّل حرف في أول سطر للعنصر <p>:
<p>في مهمة لتطوير العالم العربي</p>
<p>نعمل لنمكّن الشباب ونفتح مزيدًا من الفرص أمامهم. نحن حسوب</p>
<p>حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.</p>


<p>-بداية علامة ترقيم خاصة</p>
<p>_بداية علامة ترقيم خاصة</p>
<p>"بداية علامة ترقيم خاصة</p>
<p>'بداية علامة ترقيم خاصة</p>
<p>*بداية علامة ترقيم خاصة</p>
<p>#بداية علامة ترقيم خاصة</p>
شيفرة CSS:
p::first-letter {
  color: red;
  font-size: 130%;
}

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

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي (‎:first-letter) 1.0 1.0 5.5 3.5 1.0
‎::first-letter 1.0 1.0 9.0 7.0 1.0

انظر أيضًا

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

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