first-of-type:

first-of-type یک pseudo-class می باشد که از هر نوع خاص عناصر در یک سطح اولین آن را انتخاب می کند. یعنی اگر مثلا در یک سطح یک عنوان و پنج پاراگراف و دو عنصر تصویر داشته باشیم می توان با استفاده از این انتخابگر از هر کدام از این نوع عناصر اولینشان را انتخاب کرد.

فرض کنید HTML به صورت زیر است:

<article>
 <h2>عنوان مقاله</h2>
 <p>پاراگراف اول</p>
 <p>پاراگراف دوم</p>
 <p>...</p>
 <p>...</p>
</article>

در اینجا عنوان مقاله (h2) و اولین عنصر پاراگراف (تگ p) اولین عنصر نوع خودشان در داخل تگ article می باشند. پس می توان به صورت زیر اولین پاراگراف را انتخاب و استایل دهی کرد:

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

حال فرض کنید HTML به صورت زیر باشد:

<div class="container">
 <h1>عنوان</h1>

 <nav>
  <ul>
   <li>آیتم اول</li>
   <li>آیتم دوم</li>
   <li>...</li>
   <li>...</li>
  </ul>
 </nav>

 <article>
  <h2>عنوان مقاله اول</h2>
  <p>
  اولین پاراگراف در مقاله اول... <a href="#">لینک</a>... <a href="#">لینک دیگر</a>
  </p>
  <p>
  پاراگرافی دیگر
  </p>
 </article>

 <article>
  <h2>عنوان مقاله دوم</h2>
  <p>
   پاراگراف اول در مقاله دوم
  </p>
  <p>
   پاراگرافی دیگر
  </p>
 </article>
</div>

برای اینکه بتوانیم یک استایل خاص به اولین مقاله بدهیم داریم:

article:first-of-type {
  background-color: #eee;
  border: 1px solid #ddd;
}

حال اگر بخواهیم اولین پاراگراف در هر مقاله را داشته باشیم باید بنویسیم:

p:first-of-type {
  font-weight: bold;
}

و کد زیر اولین لینک در هر نگهدارنده که در اینجا تگ های پاراگراف هستند را انتخاب می کند:

a:first-of-type {
  color: deepPink;
}

دمویی در زیر برای بررسی بهتر آماده شده است:

See the Pen first-of-type by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی مرورگرها

first-of-type: در مرورگرهای کروم, فایرفاکس, اپرا +9.5 و اینترنت اکسپلورر +9 و همچنین در اندروید و iOS کار می کند.