عرض مصدر CSS/:first-of-type

<noinclude>{{DISPLAYTITLE: الصنف <code>‎:first-of-type</code>}}</noinclude>
الصنف الزائف <code>‎:first-of-type</code> في CSS (أي pseudo-class) يُمثِّل أوّل عنصر من نوعه في مجموعة من العناصر الأخوة.<syntaxhighlight lang="css">
p:first-of-type {
  color: red;
}
</syntaxhighlight>ملاحظة: عندما عُرِّف هذا الصنف كان من الضروري أن يملك العنصر أبًا، لكن بدءًا من مواصفة Selectors Level 4 لم يعد ذلك ضروريًا.

الشكل العام لهذا المحدد:<syntaxhighlight lang="css">
:first-of-type

</syntaxhighlight>

== أمثلة ==
لاحظ كيف ستُنسَّق أوّل فقرة <code>[[HTML/p|<nowiki><p></nowiki>]]</code> من بين العناصر الأخوة:
<syntaxhighlight lang="html">
<h2>الترويسة</h2>
<p>النص 1</p>
<p>النص 2</p>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
p:first-of-type {
  color: red;
  font-style: italic;
}
</syntaxhighlight>لاحظ كيف يمكن استخدام هذا المُحدِّد على العناصر المتشعبة، تذكَّر أنَّ [[CSS/Universal Selector|المُحدِّد العام]] <code>*</code> سيُستخدَم ضمنيًا عند عدم التصريح عن مُحدِّد:<syntaxhighlight lang="html">
<article>
  <div>هذا عنصر `div` الأول</div>
  <div>هذا <span>المتداخل`span` هو  الأول</span>!</div>
  <div>هذا <em>المتداخل`em` هو الأول</em>, لكن هذا <em>المتداخل`em` هو الأخير</em>!</div>
  <div>هذا <span>المتداخل`span` له تصميم</span>!</div>
  <b>هذا `b` مؤهل</b>
  <div>هذا آخر عنصر `div`.</div>
</article>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
article :first-of-type {
  background-color: pink;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|1.0
|3.5
|9.0
|9.5
|3.2
|}
==انظر أيضًا==
* صفحة الصنف الزائف <code>[[CSS/:first|first:]]</code> الذي يُمثِّل أوّل صفحة من المستند عند طباعته.
* صفحة الصنف الزائف <code>[[CSS/:first-child|first-child:]]</code> الذي يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).
* صفحة الصنف الزائف <code>[[CSS/:empty|empty:]]</code> الذي يُمثِّل أي عنصر ليس له أبناء.

== مصادر ومواصفات ==
*مسودة [https://drafts.csswg.org/selectors-4/#first-of-type-pseudo Selectors Level 4].
*مواصفة [https://drafts.csswg.org/selectors-3/#first-of-type-pseudo Selectors Level 3].
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Selectors|{{SUBPAGENAME}}]]
[[تصنيف:CSS pseudo-class|{{SUBPAGENAME}}]]