عرض مصدر CSS/::first-letter

<noinclude>{{DISPLAYTITLE: العنصر <code>‎::first-letter</code>‎}}</noinclude>
العنصر الزائف <code>‎::first-letter</code>‎ في CSS (أي pseudo-element) يؤدي إلى تطبيق الأنماط على أوّل حرف من أوّل سطر من العناصر الكتلية (block-level elements)، شرط ألّا يسبقها محتوى آخر (مثل الصور أو الجداول السطرية). <syntaxhighlight lang="css">
p::first-letter {
  font-size: 130%;
}

</syntaxhighlight>لاحظ أنَّه لا يسهل تحديد أوّل حرف من العنصر دومًا:
* بعض علامات الترقيم التي تسبق أو تلي أوّل حرف مباشرةً ستدخل في هذا العنصر الزائف.
* استخدام العنصر الزائف <code>[[CSS/::before|‎::before]]</code> مع الخاصية <code>[[CSS/content|content]]</code> سيؤدي إلى إضافة بعض النصوص قبل بداية العنصر، وفي هذه الحالة سيُطابِق العنصر الزائف <code>‎::first-letter</code>‎ أوّل حرف من المحتوى المولَّد. 
الشكل العام لهذا المحدد:<syntaxhighlight lang="css">
::first-letter
:first-letter
</syntaxhighlight>لاحظ أنَّ CSS3 أضافت الشكل <code>‎::first-letter</code> (لاحظ أنَّ قبله زوجين من النقط الرأسية) لتمييز العناصر الزائفة (pseudo-elements) عن الأصناف الزائفة (pseudo-classes)؛ لكن المتصفحات تقبل الشكل <code>‎:first-letter</code> المُضاف في CSS2 أيضًا. 

لا يسمَح إلا باستخدام مجموعة جزئية من خاصيات CSS مع هذا العنصر الزائف:
* جميع خصائص الخطوط: <code>[[CSS/font|font]]</code> و <code>[[CSS/font-style|font-style]]</code> و <code>font-feature-settings</code> و <code>[[CSS/font-kerning|font-kerning]]</code> و <code>font-language-override</code> و <code>[[CSS/font-stretch|font-stretch]]</code> و <code>font-synthesis</code> و <code>font-variant</code> و <code>font-variant-alternates</code> و <code>font-variant-caps</code> و <code>font-variant-east-asian</code> و <code>font-variant-ligatures</code> و <code>font-variant-numeric</code> و <code>font-variant-position</code> و <code>[[CSS/font-weight|font-weight]]</code> و <code>[[CSS/font-size|font-size]]</code> و <code>[[CSS/font-size-adjust|font-size-adjust]]</code> و <code>[[CSS/line-height|line-height]]</code> و <code>[[CSS/font-family|font-family]]</code>.
* جميع خاصيات الخلفيات: <code>[[CSS/background|background]]</code> و <code>[[CSS/background-color|background-color]]</code> و <code>[[CSS/background-image|background-image]]</code> و <code>[[CSS/background-clip|background-clip]]</code> و <code>[[CSS/background-origin|background-origin]]</code> و <code>[[CSS/background-position|background-position]]</code> و <code>[[CSS/background-repeat|background-repeat]]</code> و <code>[[CSS/background-size|background-size]]</code> و <code>[[CSS/background-attachment|background-attachment]]</code> و <code>[[CSS/background-blend-mode|background-blend-mode]]</code>.
* جميع خاصيات الهوامش: <code>[[CSS/margin|margin]]</code> و <code>[[CSS/margin-top|margin-top]]</code> و <code>[[CSS/margin-right|margin-right]]</code> و <code>[[CSS/margin-bottom|margin-bottom]]</code> و <code>[[CSS/margin-left|margin-left]]</code>.
* جميع خاصيات الحواشي: <code>[[CSS/padding|padding]]</code> و <code>[[CSS/padding-top|padding-top]]</code> و <code>[[CSS/padding-right|padding-right]]</code> و <code>[[CSS/padding-bottom|padding-bottom]]</code> و <code>[[CSS/padding-left|padding-left]]</code>.
* جميع خاصيات الإطارات: <code>[[CSS/border|border]]</code> و <code>[[CSS/border-style|border-style]]</code> و <code>[[CSS/border-color|border-color]]</code> و <code>[[CSS/border-width|border-width]]</code> و <code>[[CSS/border-radius|border-radius]]</code> و <code>[[CSS/border-image|border-image]]</code>، وجميع الخاصيات التي تختصرها.
* الخاصية <code>[[CSS/color|color]]</code>.
* الخاصيات: <code>[[CSS/text-decoration|text-decoration]]</code> و <code>[[CSS/text-shadow|text-shadow]]</code> و <code>[[CSS/text-transform|text-transform]]</code> و <code>[[CSS/letter-spacing|letter-spacing]]</code> و <code>[[CSS/word-spacing|word-spacing]]</code> (عندما يكون استعمالها مناسبًا) و <code>[[CSS/line-height|line-height]]</code> و <code>[[CSS/text-decoration-color|text-decoration-color]]</code> و <code>[[CSS/text-decoration-line|text-decoration-line]]</code> و <code>[[CSS/text-decoration-style|text-decoration-style]]</code> و <code>[[CSS/box-shadow|box-shadow]]</code> و <code>[[CSS/float|float]]</code> (إذا ضٌبِطَت إلى <code>none</code> فقط) و <code>[[CSS/vertical-align|vertical-align]]</code>.

== أمثلة ==
مثال عن استخدام هذا العنصر الزائف لتحديد أوّل حرف في أول سطر للعنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
p::first-letter {
  color: red;
  font-size: 130%;
}
</syntaxhighlight>
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|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
|}
==مصادر ومواصفات==
* مسودة [https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo CSS Pseudo-Elements Level 4]. سمحت هذه المسودة باستخدام الخاصية <code>[[CSS/opacity|opacity]]</code> و <code>[[CSS/box-shadow|box-shadow]]</code>. 
* مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-shadow CSS Text Decoration Module Level 3]. سمحت هذه المواصفة باستخدام الخاصية <code>[[CSS/text-shadow|text-shadow]]</code>.
* مواصفة [https://drafts.csswg.org/selectors-3/#first-letter Selectors Level 3].
* مواصفة [http://www.w3.org/TR/CSS2/selector.html#first-letter ‎CSS Level 2 (Revision 1)‎].
* مواصفة [http://www.w3.org/TR/CSS1/#the-first-letter-pseudo-element CSS Level 1].
[[تصنيف:CSS]]
[[تصنيف:CSS Selectors]]
[[تصنيف:CSS pseudo-element]]