CODEWITHSUNDEEP
css
Manu Chadha
Manu Chadha

Reputation: 16729

Shouldn't `display:none` completely hide an element

In the following example from https://css-tricks.com/almanac/selectors/b/blank/, why is the paragraph box still visible even though its display is set to none using ::blank?

p {
  min-height: 30px;
  width: 250px;
  background-color: lightblue;
}
p:blank {
  display: none;
}
p:-moz-only-whitespace {
  display: none;
}
/* Mozilla-only pseudo-class that works like :blank will */
<div class="blanks">
  <p>This paragraph is not empty or blank.</p>
  <p>
    <!--this is empty and blank -->
  </p>
  <p>

    <!-- this is not empty, because it has whitespace. But it is blank.-->

  </p>
  <p>This paragraph is not empty or blank.</p>
</div>

Upvotes: 2

Views: 72

Answers (2)

user9016207
user9016207

Reputation:

If you don't want to use :blank, maybe try :empty instead? I've heard that works in all major browsers. Hope this helps.

Upvotes: 1

Code4R7
Code4R7

Reputation: 2958

From your reference css-tricks ::blankdemo:

"At the time of this writing, :blank is part of the CSS Selectors Level 4 draft, and is not supported by any browser."

The codepen does work in Firefox 57.0 though, because of Mozilla's prefix p:-moz-only-whitespace {display: none;}.

Upvotes: 1

Related Questions