Is there a selector to exclude display: none elements?

Question

I want to select only whose parents have display: block and exclude those whose parents have display

Answer 1

This is not possible with pure CSS so far, Unless you explicitly specify the inline css to style="display: none".

You could use some javascript to filter a set of buttons that are visible.

var buttons = document.querySelectorAll('.block button');

var visibleButtons = [];

buttons.forEach(function (element) {
  if (window.getComputedStyle(element.parentNode).display !== 'none') {
   visibleButtons.push(element);
  }
});

console.log(visibleButtons);

.block {
  display: block;
}

.hidden {
  display: none;
}

  btn 1



  btn 2



  btn 3