:empty CSS Pseudo-class
شبه کلاس empty:
در CSS، با عناصری که فرزند نداشته باشند مطابقت پیدا می کند. فرزند میتواند یک node یا متن (شامل فاصله خالی) باشد. کامنت ها، ساختارهای پردازشی و محتوای CSS (مقدار ویژگی content
) تاثیری در خالی بودن یا نبودن عناصر ندارند.
در مثال زیر انواع حالات اثر گذاری و عملکرد شبه کلاس empty:
نشان داده شده است:
(توضیحات در قسمت کامنت html)
html
<div class="box"><!-- رنگ من سبز خواهد بود. --></div> <div class="box">رنگ من صورتی است.</div> <div class="box"> <!-- رنگ من بدلیل فاصله خالی صورتی خواهد بود --> </div> <div class="box"> <p><!-- من هم صورتی خواهم بود چون داخل عنصری دیگری هستم --></p> </div>
css
body {direction: rtl;} .box { background: pink; height: 80px; width: 80px; float: left; margin-right: 20px; } .box:empty { background: lime; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این شبه کلاس در CSS پشتیبانی می کنند.