CSS/::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>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
  esse molestie consequat.</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</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

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

• مسودة 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.