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

العنصر الزائف ‎::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 مع هذا العنصر الزائف:

• جميع خصائص الخطوط: 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.
• جميع خاصيات الهوامش: margin و margin-top و margin-right و margin-bottom و margin-left.
• جميع خاصيات الحواشي: padding و padding-top و padding-right و padding-bottom و padding-left.
• جميع خاصيات الإطارات: border و border-style و border-color و border-width و border-radius و border-image، وجميع الخاصيات التي تختصرها.
• الخاصية color.
• الخاصيات: text-decoration و text-shadow و text-transform و letter-spacing و word-spacing (عندما يكون استعمالها مناسبًا) و line-height و text-decoration-color و text-decoration-line و text-decoration-style و box-shadow و float (إذا ضٌبِطَت إلى none فقط) و vertical-align.

أمثلة

مثال عن استخدام هذا العنصر الزائف لتحديد أوّل حرف في أول سطر للعنصر <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)، لاحظ أنَّ طول أوّل سطر يختلف تبعًا لعدة عوامل بما في ذلك عرض العنصر وعرض المستند وحجم الخط.

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

• مسودة CSS Pseudo-Elements Level 4. سمحت هذه المسودة باستخدام الخاصية opacity و box-shadow.
• مواصفة CSS Text Decoration Module Level 3. سمحت هذه المواصفة باستخدام الخاصية text-shadow.
• مواصفة Selectors Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.