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

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الصنف الزائف ‎: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: الذي يُمثِّل أي عنصر ليس له أبناء.

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