شبه کلاس empty: در CSS

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