CODEWITHSUNDEEP
htmlcssdisplay
alex
alex

Reputation: 7601

Is there a selector to exclude display: none elements?

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?

Upvotes: 40

Views: 67893

Answers (6)

Amit Kumar Singh
Amit Kumar Singh

Reputation: 4475

You can check with jquery. The code below means

"Get all buttons, filtered by ones whose parent is visible on page", loop through and print html of each one.

$(document).ready(function(){
$(":button").filter(function() { return $(this).parent().is(':visible') 
       }).each(function(){
		      console.log($(this).html());
		});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="intro" style="display:block">
    My name is someone.    
   <button>    a    </button>    <button>    b    </button>    
</p>
<p>I live somewhere.</p>    <p>My best friend is someone.</p>
Who is your favourite:    
<ul id="find" style="display:none">
  <li>One</li>      <li>Two</li>      <li><button>    x    </button>    
  <button>    y    </button></li>    
</ul>

Upvotes: -5

UncaughtTypeError
UncaughtTypeError

Reputation: 8722

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/

Upvotes: 26

Jose Paredes
Jose Paredes

Reputation: 4080

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;
}
<div class="block">
  <button>btn 1</button>
</div>

<div class="block hidden">
  <button>btn 2</button>
</div>

<div class="block">
  <button>btn 3</button>
</div>

Upvotes: 2

cнŝdk
cнŝdk

Reputation: 32145

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>

Upvotes: 48

RaJesh RiJo
RaJesh RiJo

Reputation: 4400

There are no such selector available in CSS to select by their property values. You can try something with jquery by using :hidden selector to find buttons with display:none. Check below snippet for reference.

$( ".btnShow" ).click(function() {
  $( ".btn:hidden" ).show( "fast" );
});
.hidden{
  display:none;
}
.btnShow{
  display:block;
  margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="button 1" class="btn">
<input type="button" value="button 2" class="btn">
<input type="button" value="button 3" class="btn hidden">
<input type="button" value="button 4" class="btn">
<input type="button" value="button 5" class="btn hidden">
<input type="button" value="button 6" class="btn">
<input type="button" value="button 7" class="btn">
<input type="button" value="Show hidden buttons" class="btnShow">

Upvotes: 1

Quentin
Quentin

Reputation: 943221

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;
}

Upvotes: 3

Related Questions