این آموزش در تاریخ ۱۴۰۰/۱۰/۱۴ آپدیت شده است.
آموزش شبه کلاس empty در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شبه کلاس empty در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
شبه کلاس Empty در CSS
با استفاده از شبه کلاس ( یا هم انتخابگر ) empty در CSS میتوان برای تگ هایی که خالی هستند ( یعنی هیچ فرزندی یا محتوایی ندارند ) استایل دلخواه تعریف کرد.
اگر در یک تگ حتی ۱ عدد فاصله وجود داشته باشه، دیگه اون تگ خالی نیست و یه تگ محتوا دار حساب میشه
| نسخه | CSS3 |
|---|
Free-Learn
مثال از شبه کلاس Empty در CSS
در ادامه میتوانید یک مثال از این انتخابگر / شبه کلاس را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده سراسری ( یعنی در کل صفحه بروی تمامی تگ های خالی اعمال میشه )
|
1 2 3 4 5 6 |
:empty{ background-color:#e30730; color:#fff; width:100%; height:20px; } |
مثال شماره ۲ : استفاده در یک تگ خاص ( مثلا گفتیم فقط تگ های P که خالی هستن )
|
1 2 3 4 5 6 |
p:empty{ background-color:#e30730; color:#fff; width:100%; height:20px; } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از انتخابگر / شبه کلاس empty در CSS پشتیبانی میکنند یا خیر.
| نام انتخابگر | Chrome | Firefox | Opera | Safari | Edge |
| empty: | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه کلاس در CSS بصورت زیر می باشد.
|
1 2 3 |
:empty { دستورات سی اس اس در اینجا } |
Free-Learn
نکات و توضیحات
- اگه داخل یک تگ فاصله باشه بازم به عنوان یک تگ محتوا دار حساب میشه، پس این شبه کلاس بروی تگ هایی که داخلشون فاصله هست عمل نمیکنه.
- کامنت ها در درون یک تگ به عنوان محتوا حساب نمیشه، پس اگه در یک تگ فقط کامنت وجود داشته باشه این شبه کلاس بازم اون تگ رو به عنوان یک تگ بدون محتوا ( یا بدون فرزند ) حساب میکنه.
