Is there a selector to exclude display: none elements?

Question

I want to select only <buttons> whose parents have display: block and exclude those <buttons> whose parents have display:none.

Is there any way to accomplish this?

Answer 1

Actually there's a CSS3 solution to select elements that doesn't have a display:none style, or given an explicit style property:

*:not([style*="display: none"]) button{ ... }

Demo:

*:not([style*="display: none"]) button{
    color:yellow;
}

<p style="display:block">
  My name is A.
  <button>
a
</button>
</p>
<p style="display: none">
  <button>
b
</button>
</p>

Answer 2

If those display styles are declared inline then you can use the following selectors: div[style*="display: none;"] (if element has inline style attribute containing "display: none;" then apply style)

Attribute Selectors:

The CSS attribute selector matches elements based on the presence or value of a given attribute.

Src: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Attribute Contains Selector:

When looking to find an element based on part of an attribute value, but not an exact match, the asterisk character, *, may be used within the square brackets of a selector. The asterisk should fall just after the attribute name, directly before the equals sign. Doing so denotes that the value to follow only needs to appear, or be contained, within the attribute value.

Src: https://learn.shayhowe.com/advanced-html-css/complex-selectors/

Answer 3

No.

There are no selectors which select elements based on the values of properties that apply to them.

---

I don't think it would be practical for CSS to introduce such a feature either. Imagine:

:has-property-value(display: none) {
   display: block;
}