انتخاب عناصر خالی(empty) در CSS

با استفاده از شبه کلاس empty: می توانیم هر عنصری که هیچ گونه فرزندی ندارد را، انتخاب کنیم؛  مانند گره های متنی(text nodes) که متن و فاصله ی سفید را پوشش می دهند. ما می توانیم با استفاده از این شبه کلاس، به عناصری که یک CMS ،بدون ایجاد محتوای واقعی تولید کرده است دسترسی پیدا کنیم و آنها را سرکوب کنیم.

بنابراین، دستور p:empty {display: none;} از نمایش هر عنصرِ پاراگرافِ خالی، جلوگیری می کند. توجه کنید که، برای اینکه این دستور اجرا شود، عناصر باید کاملاً خالی باشند، و فاصله ی سفید یا محتوای قابل مشاهده یا عناصر فرزند نداشته باشند. بنابراین، در کدهای زیر، تنها اولین و آخرین عنصر مورد تطابق p:empty قرار می گیرند:

<p></p>
<p> </p>
<p>
</p>
<p><!—-a comment--></p>

اما دومین و سومین پاراگراف، توسط دستور empty: مورد تطابق قرار نگرفته اند؛ زیرا آنها خالی نیستند. دومین پااگراف حاوی یک فاصله ی سفید است و سومین پاراگراف حاوی کاراکتر خط جدید(newline) است. هردوی این عناصر، گره متنی(text nodes) محسوب می شوند و به همین خاطر آنها خالی محسوب نمی شوند.

اما آخرین پاراگراف تطابق می یابد؛ زیرا حاوی یک کامنت است و کامنت ها، محتوا محسوب نمی شوند. اما فاصله های سفید محتوا محسوب می شوند. اما اگر یک فاصله ی سفید(space) یا یک کاراکتر newline(خط جدید) را به هردو طرف آن کامنت، اضافه کنیم، آنگاه دستور p:empty مورد تطبق قرار نمی گیرد و با شکست مواجه می شود.

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

*:empty{display: none;}

اما یک نکته پنهان وجود دارد: دستور empty: عناصر خالی HTML مانند img و input را مورد تطابق قرار می دهد؛ مانند img و input  این دستور حتی می تواند عنصر textarea را مورد تطابق قرار دهد. مگر اینکه مقداری متن پیش فرض را در عنصر textarea وارد کنیم. بنابراین از نظر تطابق عناصر، دستور img و img:empty عملاً یکسان هستند.آنها از نظر اختصاصی بودن، با یکدیگر متفاوت هستند؛ در فصل بعد در این مورد بیشتر صحبت خواهیم نمود.

<img src="/salmon.png" alt="North Pacific Salmon">
<br>
<input type="number" min="-1" max="1" step=".01"/>
<textarea></textarea>

نکته: از اواخر سال 2017 ، دستور empty:  یک دستور منحصر به فرد(unique) است؛ زیرا تنها سلکتور CSS است که گره های متنی را هنگام تعیین تطابق در نظر می گیرد. یعنی به متن و محتوای درون عنصر نیز توجه می کند و به آن وابسته است. هر سلکتور دیگری در Selectors Level 3 تنها عناصر را در نظر می گیرد و  گره های متنی را کاملاً نادیده می گیرد. این نکته را به خاطر داشته باشید؛ بعنوان مثال می توانیم به علامت های ترکیب کننده خواهر و برادر(sibling combinators) را نام ببریم.