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 to share