empty یک pseudo-class می باشد که به وسیله آن می توان در یک صفحه عناصری که محتوا ندارند و یا به اصطلاح خالی هستند را انتخاب کرد.

عنصر خالی عنصری است که محتوا نداشته باشد. محتوا می تواند یک متن ساده و یا حداقل یک عنصر باشد. توجه داشته باشید که تگ توضیحات محتوا محسوب نمی شود.

ادامه مطلب

 

به عنوان نمونه تگ های زیر خالی هستند:

<div><!-- این عنصر خالی است --></div>
<p></p>

ولی تگ های زیر شامل محتوا هستند و خالی شمرده نمی شوند:

<div>این عنصر دارای محتوا هست پس خالی محسوب نمی شود</div>
<p>
 این عنصر هم
 <span>این عنصر نیز</span>
</p>

توجه داشته باشید که اگر در عنصری حتی یک space هم قرار بگیرد دیگر خالی محسوب نمی شود و همینطور اگر یک عنصر دارای یک فرزند هرچند خالی باشد دیگر خالی محسوب نمی شود. با این تفاسیر عناصر پاراگراف زیر خالی محسوب نمی شوند:

<p> </p>
<p><span></span></p>

همانطور که شاید بدانید محتوایی که در after:: و before:: قرار می گیرند واقعی نیستند, پس اگر عنصری دارای چنین محتوایی باشد به این معنا نیست که دارای محتوا هست پس خالی محسوب می شود و قابل انتخاب توسط انتخابگر empty: می باشد.

یکی از فایده هایی که این انتخابگر برای ما می تواند داشته باشد این است که می توان عناصر خالی که می توانند عامل فضاهای اضافی و رفتارهای عجیب و غریب در چیدمان صفحه باشند را حذف کرد. و همینطور وقتی محتوا به صورت پویا ایجاد می شود امکان اینکه زمانی عنصری خالی از محتوا بماند هست پس می توان از طریق CSS این اطمینان را به وجود آورد که آن عنصر خالی در صفحه ترسیم نمی شود و آن فضاهای خالی احتمالی را به وجود نمی آورد.

/* تمام عناصر خالی را انتخاب و مخفی کن */
*:empty {
  display: none;
}

/* تمام عناصر پاراگراف های خالی را انتخاب و مخفی کن */
p:empty {
  display: none;
}

/*  تمام عناصر منوی که خالی هستند را انتخاب و مخفی کن  */
nav a:empty {
  display: none;
}

/*  تمام سلول های خالی جدول را انتخاب کن و پس زمینه خاکستری برایشان اعمال کن  */
td:empty {
  background-color: #eee;
}

 

در مثال زیر به عناصر پاراگرافی که خالی هستند یک رنگ پس زمینه اعمال شده است:

 

 

پشتیبانی مرورگرها

انتخابگر empty: در مرورگرهای کروم, فایرفاکس, اپرا +9.5 و اینترنت اکسپلورر +9 و همچنین در اندروید و iOS کار می کند.