Главная » Языки программирования

Css hide empty elements

На чтение 10 мин
Содержание
  1. Hide an element if the next one is empty
  2. 8 Answers 8
  3. CSS
  4. HTML
  5. Hiding empty elements with CSS :empty and :has()
  6. Hiding an empty element
  7. Hiding an element that has an empty child
  8. Hide div, if the div is empty
  9. CSS — Hide element if child is empty [duplicate]
  10. 2 Answers 2
  11. Hide a whole div with CSS with part of it is empty
  12. 3 Answers 3

Hide an element if the next one is empty

I would like to hide the h3 element when the div is empty. I’m willing to change the html structure but the h3 has to be outside of the div because its content is dynamically changed. Is there a way to do that in CSS ?

No. CSS has no way of selecting a previous sibling of an element. At all. Despite the number of people that claim CSS 4 will allow it (despite clear statements to the contrary, ref: dev.w3.org/csswg/selectors4/#profiles).

8 Answers 8

There is no syntax to select a parent element or any other non-child element from #divid . You can select #divid if it’s empty, by #divid:empty , but there is no way you can select .hideIfDivIsEmpty in any browser by selecting that. According to this question there is such a thing in CSS4 (specs), but it is not supported in any browser as of now and according to the same specs, the selector is too slow to be implemented in browsers.

See the other answers for the javascript solution to this problem.

Please, read the specifaction you linked to; specifically 2.1. Fast vs Complete Selector Profiles. Yes, the Selectors API has*/*may have a subject pseudo-class; but it won’t be available (as currently written) in browser CSS.

Thanks. I’ve altered the answer to reflect that. Had to read and re-read it a half dozen of times though.

well wait you are going to get some very good answers here. but my solution would be make a css class then assign it to both the h3 and div tags then using jquery selectors get both of them using the css class. Now you will get an arry of tags if the the element at index 1’s innertext = null or empty then the element at index 0 should hide. i hope this will help

I don’t think that you can do it with CSS.

var divs = $(".hideIfDivEmpty"); divs.each(function () < var div = $(this); if (div.next().html() === "") < div.hide(); >>);

And like @Prinzhorn correctly said: there is a liner solution:

$('h3.hideIfDivEmpty + div:empty').prev().hide();

@Prinzhorn unfortunately that didn’t work. However, it seems the one-liner is becoming as long as the standard version which is as easy as tacking on .trim() .

Читайте также:  Python зачем нужен словарь

Add your label using the ::before css selector.

Hide your label for empty/null values using the :empty selector

/* HIDE IF EMPTY*/ .label:empty < display: none; >/* LABEL STYLES */ .label::before < font-weight:bold; >/* LABEL VALUES */ .l_colour::before < content:"Colour: "; >.l_size::before < content: "Size: "; >.l_shape::before

This problem can only be solved client-side with JavaScript (or one of its libraries). With plain JavaScript, I’d suggest:

function hideIfNextEmpty(el) < var text = 'textContent' in document ? 'textContent' : 'innerText'; if (el.nextElementSibling[text].replace(/\s/g,'').length === 0) < el.style.display = 'none'; >> hideIfNextEmpty(document.querySelector('h3.hideIfDivEmpty'));

A CSS-only version would not have very good browser support. It would involve putting the header tag after the content, followed by manipulating the positioning of the elements.

Here’s a very hacked together CSS-only solution. IE 9+. You should do this using JavaScript instead as others have suggested.

CSS

article p:empty + header < display: none; >article p:empty < margin: 0; >article p < float:left; >article header < position: absolute; top: 0; >article header h1 < margin: 0; >article > p:first-of-type:not(:empty) < padding-top: 1em; >article < position: relative; >/* include clearfix */

HTML

 
Hidden article
 
 
Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.
 
Porta Malesuada

Источник

Hiding empty elements with CSS :empty and :has()

You might be used to adding and removing .open and .closed classes on div s and containers to control their state styles. What if we could just write CSS that reflected the state of the DOM, without having to additionally handle state by toggling classes? In this post, we’ll explore how to hide elements with the :empty pseudo-class if they have no children, and how to make the pattern more granular and practical when we combine it with :has() and :not() .

Hiding an empty element

The :empty matches any element that has no children. The pseudo-class is supported by all major browsers, and is safe to use even if you’re targeting Internet Explorer. We can use it in combination with the display property to hide an element if it’s empty:

.container:empty  display: none; >

In this example, the :empty pseudo-class is used to select elements with the class .container that have no children (including text nodes), and the display: none rule is used to hide them.

  class="container">Some text  class="container">

Hiding an element that has an empty child

Assume that we have a some HTML markup that looks something like this, that we dynamically populate with suggestions inside of .results …

 class="container"> Suggestions  class="results"> .

…and we want to hide the entire .container when the .results div is empty (since the container itself will never be empty). For scenarios like this, we can combine the the :empty pseudo-class with :has() , to hide any .container that has an empty .results div :

.container:has(.results:empty)  display: none; > 
  class="container"> Suggestions  class="results"> Result 1 Result 2 .    class="container"> Suggestions  class="results">

Источник

Hide div, if the div is empty

How can I hide a DIV (HEADER) if the DIV is empty? here is my HTML and Style, have tried. HEADER:empty , but when I run the code, the DIV is still there.

       
 
 
 
 
DATE AND TIME

hhfh
 
CURRENT WEATHER
 
 
 
FORECAST test

Hope someone can guide me, in the right direction. As you can see the HEADER DIV is empty — but is still showed with the green background color. UPDATE As some of you write, then I can add this and it works..

.HEADER-empty, .HEADER:empty, [class^=HEADER-]:empty

but I then get a white area over the TOP div and thats not what i’m looking for. If the HEADER is empty, then hide the div and get the TOP div to the top. I have then tried to use this for the TOP class-style.

Источник

CSS — Hide element if child is empty [duplicate]

Is it possible to hide a parent element, if its child is empty? I know there is the :empty selector, but it only works, if the parent doesn’t contain anything, including HTML elements. This is my HTML:

It isn’t empty because there is a in there. Does it have to be there? (edit) Sorry, misread the top of the question. No, you cannot affect the parent based on what the child is doing. That is that cascading part of Cascading Style Sheet

You could remove the strong element and assign a font-weight: bold to the span element. Doing so you could hide the whole span with span:empty < display: none; >

2 Answers 2

You can use has() (not yet supported in Firefox):

.label-promotion:has(> strong:empty)

If the child of .label-promotion will always be a , you can do:

.label-promotion strong:empty

to hide the . However, you can not hide the itself with CSS. See this answer to a similar question: I would like to hide my outer div if inner div is empty

It works for me in Chrome, but not in Firefox. It seems empty does not work within has. Could you check it? Thanks!

I’d like to avoid JS for this

Yes, I agree, it’s always better to have a pure CSS solution.

But in this instance all you need to do is:

  • find all the .label-promotion
  • loop through them, checking if each has an empty
  • if it does, add to the the class .is-empty

Working Example:

// Find all the .label-promotion const labelPromotions = document.querySelectorAll('.label-promotion'); // Loop through them. for (labelPromotion of labelPromotions) < let strong = labelPromotion.getElementsByTagName('strong')[0]; // . checking if each has an empty if (strong.textContent === '') < // If it does, add to to the the class .is-empty labelPromotion.classList.add('is-empty'); > >
A C D G

Источник

Hide a whole div with CSS with part of it is empty

Is there a way to hide a whole div if part of it is empty? For example if «dd» is empty as shown below can I hide the whole class «test» so the keyword Restrictions does not show either. I tried .test dd:empty < display: none; >but this does not work. thanks!

CSS alone can’t do that. Either, you need a javascript to retrieve empty elements and hide their parents, or your CMS applies special CSS classes if there’s no content.

3 Answers 3

I don’t think there’s any easy way to do what you’re talking about with just CSS. Better to test it server-side if you can. But if you can’t here’s some JS that will do the job.

  
 
Restrictions:
 
Other Restrictions:
 
Since I have content, I won't be hidden.

Just a fair warning: the code uses some functions that may not exist in older IE, such as Array.prototype.map , String.prototype.trim , and addEventListener . There are polyfills available for these and you could also write your own pretty easily (or just do it with a for loop instead).

Источник

Оцените статью