: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 پشتیبانی می کنند.