Shulou(Shulou.com)06/01 Report--

This article is about what empty refers to in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

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"

}

Thank you for reading! This is the end of the article on "what does empty mean 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, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.