Select visible elements in css selectors (querySelector) - css

Question

Eg.
<div style="display:none">
<span id=test style="display:none"></span>
</div>
I know in jquery you can do :visible
I tried something like :not([display=none]) > span but this will also select nested invisible elements. Eg:
document.querySelectorAll(':not([display=none]) > span').forEach(elem =>
console.log(elem.id)
);
<div id=d style="display:none">
<div id=dd>
<span id=dds></span>
</div>
<span id=ds></span>
</div>
Is there anyone to make a selector that would only accept visible elements?
If there were an AND selector I could do something like the following:
:and(
:not([display=none]) > span,
:not([display=none]) > * > span,
:not([display=none]) > * > * > span,
etc.
)
These are my best workarounds:
function* allVisibleElems(parent = document)
{
for (let elem of parent.children)
{
if (elem.style.display === 'none') continue;
yield elem;
yield* allVisibleElems(elem);
}
}
This function would have equivalent functionality to document.querySelectorAll(':visible').
function isVisible (elem)
{
while (elem !== document)
{
if (elem.style.display === 'none') return false;
elem = elem.parentNode;
}
return true;
}
This function would have equivalent functionality to elem.matches(':visible').
Note: these solutions only work when setting the style.display property to none but that is all I need for my application.

Answer 1

I think you are looking for something like that ?
document.querySelectorAll('span').forEach( sp =>
{
let
pDiv = sp.closest('div')
, pDivOK = true
;
while(pDivOK && pDiv)
{
pDivOK &&= (getComputedStyle(pDiv).display != 'none')
pDiv = pDiv.parentNode.closest('div')
}
if ( pDivOK )
console.log( sp.id, "<-- parents '<div' are all visible")
});
.noDisplay {
display: none;
}
<div id="d" style="display:none">
<div id="dd">
<span id="dds"></span>
</div>
<span id="ds"></span>
</div>
<div id="1d" class="noDisplay">
<div id="1dd">
<span id="1dds"></span>
</div>
<span id="1ds"></span>
</div>
<div id="2d">
<span id="2ds"></span>
</div>