الصنف ‎:first-of-type

الصنف الزائف ‎:first-of-type في CSS (أي pseudo-class) يُمثِّل أوّل عنصر من نوعه في مجموعة من العناصر الأخوة.

p:first-of-type {
  color: red;
}

ملاحظة: عندما عُرِّف هذا الصنف كان من الضروري أن يملك العنصر أبًا، لكن بدءًا من مواصفة Selectors Level 4 لم يعد ذلك ضروريًا. الشكل العام لهذا المحدد:

:first-of-type

أمثلة

لاحظ كيف ستُنسَّق أوّل فقرة <p> من بين العناصر الأخوة:

<h2>الترويسة</h2>
<p>النص 1</p>
<p>النص 2</p>

شيفرة CSS:

p:first-of-type {
  color: red;
  font-style: italic;
}

لاحظ كيف يمكن استخدام هذا المُحدِّد على العناصر المتشعبة، تذكَّر أنَّ المُحدِّد العام * سيُستخدَم ضمنيًا عند عدم التصريح عن مُحدِّد:

<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>

شيفرة CSS:

article :first-of-type {
  background-color: pink;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	3.5	9.0	9.5	3.2

انظر أيضًا

• صفحة الصنف الزائف first: الذي يُمثِّل أوّل صفحة من المستند عند طباعته.
• صفحة الصنف الزائف first-child: الذي يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).
• صفحة الصنف الزائف empty: الذي يُمثِّل أي عنصر ليس له أبناء.

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

• مسودة Selectors Level 4.
• مواصفة Selectors Level 3.