مرجع CSS فارسی
PSEUDO-CLASS
empty:
از شبه کلاس empty: برای انتخاب و استایل دهی به المان های خالی و بدون محتوا استفاده می شود.
المانی خالی محسوب می شود که فرزندی نداشته باشد و یا متنی داخل آن نوشته نشده باشد.
<div><!-- COMMENT HERE --></div>
برای مثال ، المان خالی <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.
پشتیبانی مرورگر
disabled: در مرورگر های کروم ، فایرفاکس ، سافاری ، اپرا +9 ، اینترنت اکسپلورر +9 و اندروید و آی او اس پشتیبانی می شود.
بیشتر بخوانید
استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .
همچنین منتظر دیدگاه های شما هستیم.