مرجع CSS فارسی

PSEUDO-CLASS

empty:

از شبه کلاس empty: برای انتخاب و استایل دهی به المان های خالی و بدون محتوا استفاده می شود.

المانی خالی محسوب می شود که فرزندی نداشته باشد و یا متنی داخل آن نوشته نشده باشد.

<div><!-- COMMENT HERE  --></div>
                
سایر نکات

محتوای تولید شده توسط شبه عنصر before: و یا after: نیز باعث نمی شوند یک المان خالی به حساب نیاید . حتی اگر دارای محتوا یا خصوصیت content باشند.

برای مثال ، المان خالی <div></div> با متنی تولید شده توسط after: نیز خالی محسوب می شود.

div {
    padding: 15px; /* make sure it takes up some space to be able to see it rendered (just for sake of demonstration) */
}

div::after {
    content: "I'm generated inside the div."
}

div:empty {
    background-color: linen;
}

                

ایجاد یک فضای خالی با space یا فاصله و همینطور سک المان فرزند خالی باعث می شود المان مذکور خالی نباشد. مثال های زیر شامل شبه کلاس empty: نمی شوند.

<p> </p> <!-- contains a white space -->
<p><span></span></p> <!-- contains an empty element -->
                

المانی که باز شده ولی بسته نشده نیز خالی نیست.

<p>
                

المان های خودبسته مثل </ hr />, <br />, <img /> ، خالی محسوب شده و شامل empty: می شوند.

مثال ها
/* selects and hides all elements on a page */
*:empty {
    display: none;
}

/* selects and hides all empty paragraphs */
p:empty {
    display: none;
}

/* selects and hides all menu items that are empty */
nav a:empty {
    display: none;
}

/* selects empty table cells in a table and applies a background color to them */
td:empty {
    background-color: #eee;
}
                
دمو

در دموی زیر ، المان هایی که شامل empty: می شوند با رنگ پس زمینه مشخص شده اند . برای درک بهتر کدهای HTML را بررسی کنید.

See the Pen :empty CSS example by alishooti (@alishooti) on CodePen.0

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

disabled: در مرورگر های کروم ، فایرفاکس ، سافاری ، اپرا +9 ، اینترنت اکسپلورر +9 و اندروید و آی او اس پشتیبانی می شود.

بیشتر بخوانید

استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .

همچنین منتظر دیدگاه های شما هستیم.