employing the CSS `:empty` pseudo-class to conceal an element

Question

employing the CSS `:empty` pseudo-class to conceal an element

Upon using chrome for inspection, I stumbled upon the following code snippet:

<div class="entry-content">
    <p>We .... </p>
</div>
<footer class="entry-footer">
                    </footer>

Occasionally, this footer element is found empty while other times it contains content.

My attempt to hide the empty footer with CSS failed when I used the following code:

footer.entry-footer:empty {
display:none;
}

Despite my efforts, it seems like either I am making a mistake in my approach or there might be hidden content within the supposedly empty footer!

css

Answer 1

Answer №1

:empty requires the element to be devoid of any whitespace as well.

Check out this example. The elements .test.blue and .test.red have some white space but are not set to display: none; (except for .test.red with additional JS)...

If you want to get rid of the white space post load, here's a snippet of JS code:

var empties = document.querySelectorAll( '[selector_here]' );
for ( key in empties ) {
    if ( typeof empties[key].innerHTML != "undefined" ) empties[key].innerHTML = empties[key].innerHTML.trim()
}

The JavaScript above trims the whitespace from elements matching the specified selector. In my example, I used the class empty (demonstrated on .test.red)

However, it is advisable to clean up the HTML instead.

Answer 2

:empty requires the element to be devoid of any whitespace as well.

Check out this example. The elements .test.blue and .test.red have some white space but are not set to display: none; (except for .test.red with additional JS)...

If you want to get rid of the white space post load, here's a snippet of JS code:

var empties = document.querySelectorAll( '[selector_here]' );
for ( key in empties ) {
    if ( typeof empties[key].innerHTML != "undefined" ) empties[key].innerHTML = empties[key].innerHTML.trim()
}

The JavaScript above trims the whitespace from elements matching the specified selector. In my example, I used the class empty (demonstrated on .test.red)

However, it is advisable to clean up the HTML instead.

Answer 3

Answer №2

After conducting a brief experiment, it appears that including white space is considered content. By starting your closing tag on a new line, a newline character will be inserted silently, causing your :empty selector to fail.

To resolve this issue, your HTML should resemble the following:

<footer class="entry-footer"></footer>

Since there is absolutely nothing between the opening and closing tags, the element qualifies as being :empty

Answer 4

After conducting a brief experiment, it appears that including white space is considered content. By starting your closing tag on a new line, a newline character will be inserted silently, causing your :empty selector to fail.

To resolve this issue, your HTML should resemble the following:

<footer class="entry-footer"></footer>

Since there is absolutely nothing between the opening and closing tags, the element qualifies as being :empty

employing the CSS `:empty` pseudo-class to conceal an element

Answer №1

Answer №2

Similar questions

Maintain position:relative while adding child elements to the div

Having trouble understanding the odd behavior in IE7. Suddenly seeing a scrollbar appear when hovering

How can I effectively vertically position a button in Bootstrap 5 without compromising its functionality?

Toggle the visibility of div elements by clicking on another div

Using EJS Tags within an external CSS file

Removing margins from the footer and header after adding a video background: A step-by-step guide

How can I prevent an image from moving in relation to other objects on a webpage using HTML?

An error occurred when attempting to run the command npm run compile:sass, displaying the message: npm ERR! missing script:

What is the best way to ensure that two divs have aligned bottom edges?

What is the method to show a tag while dragging content in html5?

Hover Effects on Facebook Tabs

Flameflare/Console-inspired hover animation

After applying the rotateY function, the z-index appears to be malfunctioning

The Bootstrap 4 navbar remains consistently visible on mobile devices

Encountering an issue when adding SASS Compass Breakpoint to my development project

Error encountered during npm installation caused by the extract-text-webpack-plugin

Dealing with Sideways Overflow Using slideDown() and slideUp()

Height of Owl Carousel on mobile devices

Steps for generating a sophisticated shadow effect using CSS

Discovering the dimensions of a disabled attribute within a table using XPath in Selenium with Java