No items

Element visible only if there is no sibling via CSS

My current code looks something like this:

if list.isEmpty() {
    output("<div>No items</div>")
} else {
    for each item in list
        optput("<div>" + item + "</div>")
}

      

However, all No Elements logic belongs to the species and should be separated from the logic. Ideally, I would like to just

for each item in list
    optput("<div>" + item + "</div>")

      

And then the HTML template looks something like this:

<div id="container">
    <div style="visible only if no siblings">No items</div>
    <div>Item 1</div>
    <div>Item 2</div>
<div>

      

The problem is I can't figure out how to do the part "visible only if no siblings"

. Is there a way to do this reliably (works in all standard browsers) using CSS?

+3


source to share


1 answer


Give the div you only want to see if there are no siblings of a specific class:

<div id="container">
    <div class="vis-only-no-siblings">No items</div>
    <div>Item 1</div>
    <div>Item 2</div>
<div>

      



As long as divs don't have other siblings, you should be able to use a pseudo selector :only-child

like:

#container div.vis-only-no-siblings{
    display: none;
}

#container div.vis-only-no-siblings:only-child {
    display: block;
}

      

+6


source







All Articles