Is there a selector to exclude display: none elements?

November 28, 2023 by Tarik

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>