From 476a5084df344764625ed52c4eedf4e4a4069f57 Mon Sep 17 00:00:00 2001
From: byt3h3ad <adhirajd007@gmail.com>
Date: Tue, 14 Nov 2023 01:34:16 +0530
Subject: [PATCH] new file: css/finding-empty-elements.md

---
 css/finding-empty-elements.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 css/finding-empty-elements.md

diff --git a/css/finding-empty-elements.md b/css/finding-empty-elements.md
new file mode 100644
index 0000000..5f82b2e
--- /dev/null
+++ b/css/finding-empty-elements.md
@@ -0,0 +1,19 @@
+# Finding Empty Elements With `:empty`
+
+The `:empty` CSS pseudo-class represents any element that has no children.
+
+AN element is considered 'empty' if there is nothing in between the tags. This nothing, however, does not include whitespace. And if the CSS for the element has generated [content](https://css-tricks.com/almanac/properties/c/content/)  —  as from a pseudo-element like `::before` or `::after`  —  it is also still considered empty.
+
+One has to be careful with pictures and inputs as they have no container contents. A good way of dealing with something like this is to use the `:not` pseudo-class to catch them.
+
+```css
+:not(svg, img, picture, input, textarea):empty {
+  /* css */
+}
+```
+
+[docs](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty)
+
+[source](https://youtube.com/shorts/wk79huqm1h4)
+
+There is a new experimental (`:blank`)[https://developer.mozilla.org/en-US/docs/Web/CSS/:blank] pseudo-class that builds upon the `:empty` pseudo-class, but also selects elements that include whitespace and empty user input elements like `<input>` or `<textarea>`. However there is no browser support and `:empty` is being updated to include whitespace. There is a version by Mozilla supported on only Firefox called (`:-moz-only-whitespace`)[https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-only-whitespace].