What is empty in css
This article will explain in detail about css: what is empty, the editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.
First of all, let's find out: what is empty? What's the use?
Empty is a pseudo-class selector for css that selects elements that are empty on the page.
If an element does not have any child elements (nodes) or text content, the element is counted as empty. Comments and processing instructions do not affect whether the element is empty. Such as:
Will be considered empty and will then be selected by: empty, while:
Text and child nodes.
Here is some content.
Type here.
Is not considered empty, so it does not match the selector.
Selecting empty elements is useful for hiding these elements, because if they are filled, they may be the reason for strange vertical and / or horizontal white space. It is also useful for deleting empty elements in dynamic environments where they are no longer needed or useful. Example:
/ * Select and hide all elements on the page * /
*: empty {
Display:none
}
/ * Select and hide all empty segments * /
P:empty {
Display:none
}
/ * Select and hide all empty menu items * /
Nava:empty {
Display:none
}
/ * Select an empty table cell in the table and apply a background color to it * /
Td:empty {
Background-color:#eee
}
Description:
1. Content generated by pseudo elements:: before,::after does not count as "real" content, and even if they exist within the element, it does not affect the white space between the elements.
2. Spaces and empty child elements within an element are counted as character information within that element, so if an element contains one of two elements, the element is no longer considered empty. For example, the following two elements are not considered empty:
3. Because spaces are treated as content, element tags that are open but not closed will not be empty. For example:
4. If the start tag is followed by another tag, it is considered empty again.
Content.
5. If an open tag is followed by another open tag that does not directly follow another tag, the first tag is considered empty, while the second tag is not (because of white space). For example:
6. Self-closing elements, such as, and
All will be considered empty and will match the: empty selector.
Let's take a look at a simple example: the use of empty:
Example demonstration: applying a linen background to an empty paragraph
Html Code:
Test, test.
Test, test!
Css Code:
.container {
Margin:40pxauto
Max-width:700px
}
P:empty {
Background-color:linen
Padding:15px
}
.pseudo:: before {
Content: ":: before add content"
}
This is the end of the article on "what is empty in css?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.
