خوش آمدید

 

only-of-type: یک pseudo-class است و عنصری که تنها فرزند از یک نوع خاص در یک نگهدارنده باشد را انتخاب می کند.

خطوط HTML زیر را در نظر بگیرید, در اینجا p:only-of-type باعث انتخاب پارگراف می شود چون عنصر p تنها فرزند از نوع پاراگراف در نگهدارنده خود یعنی article هست.

ادامه مطلب

 

<article>
  <h2>........</h2>
  <p>عنصر پاراگراف</p> <!-- انتخاب می شود -->
</article>

اما در خطوط زیر عنصر پاراگراف تنها فرزند از نوع پاراگراف نمی باشد بلکه پاراگراف دیگری هم وجود دارد. پس پاراگراف انتخاب نمی شود.

<article>
  <h2>........</h2>
  <p>عنصر پاراگراف</p> <!-- انتخاب نمی شود -->
  <p>عنصر پاراگراف</p> <!-- انتخاب نمی شود -->
</article>

انتخابگر only-of-type: شبیه انتخابگر only-child: می باشد با این تفاوت که only-child: وقتی یک فرزند را انتخاب می کند که نگهدارنده آن هیچ فرزند دیگری از هیچ نوعی نداشته باشد.

 

مثل دیگر pseudo-classها این انتخابگر هم می تواند به صورت زنجیره ای با دیگر انتخابگر ها استفاده شود:

a:only-of-type:hover {
  /* styles here */
}

span:only-of-type::after {
  /* styles here */
}

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

 

 

 

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

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