شبه کلاس only-child: در CSS

:only-child Pseudo-class

سودو کلاس ()only-child: در CSS عناصری که هیج خویشاوندی ندارند را هدف قرار می دهد.
این شبه کلاس همانندlast-child ،:first-child و یا (1)nth-child: عمل می کند اما با ویژگی پایینتر.

/* را انتخاب می کند که تنها فرزند والد خود باشد<p> هر تگ */
p:only-child {
  background-color: lime;
}

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

نحوه عملکرد این شبه کلاس را در مثال زیر میبینیم:

html

<div>
  <div>من تنها فرزند هستم.</div>
</div>

<div>
  <div>من اولین خویشاوند هستم.</div>
  <div>من دومین خویشاوند هستم</div>
  <div>من سومین خویشاوند هستم، <div>اما من تنها فرزند هستم.</div></div>
</div>

css

div:only-child {
  color: red;
}

div {
  display: inline-block;
  margin: 6px;
  outline: 1px solid;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این شبه کلاس در CSS پشتیبانی می کنند.