العنصر ‎::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>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

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