only-child:

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

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


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

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


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

انتخابگر only-child را می توان با ترکیب انتخابگرهای دیگر شبیه سازی کرد:


:first-child:last-child { /* only-child */

}

:nth-child(1):nth-last-child(1) { /* only-child */
  
}

اگر با انتخابگرهای بالا آشنا نیستید به لینک های زیر مراجعه کنید:

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


a:only-child:hover {
  /* styles here */
}

span:only-child::after {
  /* styles here */
}

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

See the Pen ojZZJp by Mojtaba Seyedi (@seyedi) on CodePen.

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

دوره مقدماتی طراحی صفحات وب