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

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الصنف الزائف ‎:first-of-type في CSS (أي pseudo-class) يُمثِّل أوّل عنصر من نوعه في مجموعة من العناصر الأخوة.
p:first-of-type {
  color: red;
}
ملاحظة: عندما عُرِّف هذا الصنف كان من الضروري أن يملك العنصر أبًا، لكن بدءًا من مواصفة Selectors Level 4 لم يعد ذلك ضروريًا. الشكل العام لهذا المحدد:
:first-of-type

أمثلة

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

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
شيفرة CSS:
p:first-of-type {
  color: red;
  font-style: italic;
}
لاحظ كيف يمكن استخدام هذا المُحدِّد على العناصر المتشعبة، تذكَّر أنَّ المُحدِّد العام * سيُستخدَم ضمنيًا عند عدم التصريح عن مُحدِّد:
<article>
  <div>This `div` is first!</div>
  <div>This <span>nested `span` is first</span>!</div>
  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
  <div>This <span>nested `span` gets styled</span>!</div>
  <b>This `b` qualifies!</b>
  <div>This is the final `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

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