Csswg-drafts: [selectors] :visible pseudo-class for targeting only visible elements

[castastrophe]

https://www.w3.org/TR/selectors-4/

Proposal to add a :visible pseudo-class to the selectors specification. This would allow authors to target only elements in the DOM that do not have display: none or visibility: hidden applied. Would be helpful if it also excluded style and script tags that do not render visible user content. This would add a lot of value for systems builders as often they do not have full control of the markup they are styling.

Example use-cases

• li:visible: Target all visible list items.
• *:first-child:visible: Target the first visible element (this is extremely useful for situations where a script or style tag might appear first in the DOM but is not visible to the user).
• div:not(:visible): A way to toggle visibility (though some JS or interaction would likely be involved to trigger the change).

Apologies if this has already been discussed, I did a search of the issue queue and did not see anything comparable. I look forward to discussion on this!

[chriscoyier]

My little case that (maybe?) triggered this.

Authored HTML:

<div class="book">
   <img src="" alt="">
   ...
</div>

CSS:

.book :first-child {
  /* size the image */
}

Production HTML:

<div class="book">
   <script src="third-party-performance-thing.js"></script>
   <img src="" alt="">
   ...
</div>

So that CSS now fails because it's targeting the wrong thing. Obviously can be worked around, but this CSS might be more resilient?

.book :first-child:visible {
  /* size the image */
}

[Loirooriol]

How do you avoid cycles?

:visible { display: none }

And BTW, :first-child:visible would match the first child if it's visible, instead of the first visible child. That would be :nth-child(1 of :visible).

this is extremely useful for situations where a script or style tag might appear first in the DOM but is not visible to the user.

I think it would be easier to cover this usecase with a :metadata pseudo-class, matching metadata content: base, link, meta, noscript, script, style, template, title. But I'm not convinced this is worth it.

[Alohci]

Within Selectors 4, you could do

:nth-child(1 of :not(base, link, meta, noscript, script, style, template, title))

right?