empty:

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;
}

 

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

 

See the Pen :empty by Mojtaba Seyedi (@seyedi) on CodePen.


 

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

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

5 دیدگاه برای “empty:

  1. سلام خسته نباشید
    به یه مشکلی خوردم !
    داشتم سعی میکردم یه تعداد input رو با css بسازم
    میخوام زمانی که کاربر توی اینپوت چیزی نوشت lable که کنار input هست پایین نیاد و همون بالا بمون
    برای این که بهتر متوجه بشید کد هارو پلود کردم
    http://s8.picofile.com/file

    1. سلام. ممنون

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

      میشه جای input از textarea استفاده کرد. که نکنید چون از نظر semantic درست و معتبر نیست.

      به نظر من بهترین کار اینه که از js استفاده کنید.

      1. سلام، وقتتون بخیر
        خسته نباشید
        در این کامنتی که به دوستمون پاسخ دادید، نوشتید عناصر input با انتخابگر empty قابل تشخصی نیستند، اما با انتخابگر empty قابل تشخصی هستن، منتهی وقتی هم که چیزی درونشون می نویسیم، باز هم همون empty روشون اعمال میشه.
        یک نگاهی به دموی زیر کنید.
        https://jsfiddle.net/igharaee/vk4uessh/

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *