خوش آمدید

 

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

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

 

 

 

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

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