Css display block selector

Show or hide div based on selected value

I have also tried other selectors, such as select[selected] ~ div or option:focus #targ1 . I even tried to add an ::after pseudo element on the select element, but div s inside the option tag are ignored or act weird. It seems like select and option tags have kind of their own rules which I didn’t find on w3schools. How can I show and hide the div elements based on the currently selected option using only HTML and CSS? Edit: Simpliest way to solve this is inline-js, but I’m looking for a no js solution.

[data-value=test1] ~ #test1 < color: red; >[data-value=test2] ~ #test2 < color: green; >[data-value=test3] ~ #test3

 Test a Test b Test c  
Target 1
 
Target 2
 
Target 3

2 Answers 2

The bad news

In order to detect which option is currently selected with CSS, you would need to apply the :checked pseudo-class to the option element, not to the select element. See the question «CSS :selected pseudo class similar to :checked, but for elements» for more info.

Combining that with CSS combinators (the adjacent sibling selector + , the general sibling selector ~ , the child selector > , and the descendent selector) is frustratingly ineffectual. The combinators can be combined to select any sibling or descendant, but can never select a parent or cousin. and since the HTML spec for the select element says that its allowed content is «zero or more option or optgroup elements», you simply can’t affect a div using the value of a select element with CSS alone.

Using a drop-down with JavaScript

The example below monitors the select element for changes. When a change occurs, it grabs the newly-selected option element and reads the targets for that option from a data attribute (this is a nice convenience, because it allows you to specify the filter targets right in the HTML — thereby keeping your model and control logic separate). Then it goes through all valid targets and either adds or removes the .hidden class based on whether that target is in the list provided by the data attribute.

var filter = document.getElementById('filter'); filter.addEventListener('change', function() < var option = this.options[this.selectedIndex]; var targets = option.dataset.targets.split(/(\s+)/); for (var target of document.getElementsByClassName('target')) < if (targets.indexOf(target.id) >= 0) target.classList.remove('hidden'); else target.classList.add('hidden'); > >);

 Show no targets Show target 1 Show target 2 Show targets 1 and 2  
Thsi is the first target.
 
This is the second target.

Using radio buttons without JavaScript

Unlike drop-down elements, radio buttons don’t need to be nested inside a wrapping element. Because of this, you can structure your HTML so that the div elements are general siblings of the radio buttons, and you can use the :checked class to affect their visibility.

.target < display: none; >#f1:checked ~ #t1 < display: block; >#f2:checked ~ #t2 < display: block; >#f3:checked ~ #t1, #f3:checked ~ #t2

Show no targets 
Show target 1 
Show target 2 
Show targets 1 and 2 
This is the first target.
 
This is the second target.

Источник

div display if block jquery

So you want to distinguish between display: block and display: none ? If so, you can better use the is() function in combination with the :visible selector for this:

This works regardless of if you used display: block , or display: inline , or display: inline-block .

@Dustin: I’m not sure why you’re posting a comment like that while this is very simple to experiment yourself. If you’re having a problem with this specific case, it’s caused elsewhere.

Okay, let’s put it this way. This will work if you want to know if the div is currently visible. This won’t work if you want to know if the div is a block (the original question, which also led me to this stackoverflow question from a Google search.) In my case, I wanted to know if a (currently hidden) div was going to be hidden when I revealed the parent div. jsfiddle.net/ejVvu/1 as you can see, this answer won’t work to check if a div has a block attribute (the original question.) So, +1 for a «better» solution for current visibility, but not the answer to the question.

@Dustin: the answer just answered what the OP actually needed. See also meta.stackexchange.com/questions/66377/what-is-the-xy-problem

Your point is valid, I’m not sure what the right approach is here since the way the OP worded his question, was exactly what I needed to know, which Brian answered. Yet, with the XY problem philosophy, and the fact that the OP’s div ID was #toshow, you may be correct to infer that he actually needed a way to determine if something was visible in the moment. Perhaps a request to clarify the question, or an expanded answer to include a direct answer and a «what you might actually need is. » alternative. Anyways, hopefully my fiddle will help users that were in my situation. TY for the XY link

Источник

Select only (display:block) element from list of items Jquery

I’m making a menu and i need to select one particular element from a list of element returned by Jquery. When i run on console :

$("[type='subMenu']").css('display') == 'block' 

Be sure to have a read of the additional notes on the page @billyonecan linked to for some info on the performance factor of using that method.

3 Answers 3

Others have already pointed out the JQuery :visible selector. However, there are some performance issues with it, as pointed out in the JQuery API documentation:

• Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(«:visible») .
• Using this selector heavily can have performance implications, as it may force the browser to re-render the page before it can determine visibility. Tracking the visibility of elements via other methods, using a class for example, can provide better performance.

If you’d prefer to avoid those issues, you could use a native CSS selector, instead. In plain ol’ normal JavaScript, this would do the trick for you:

document.querySelector("[type=subMenu][style*=display\\:block]"); 

Or, if you need to select multiple elements at once:

document.querySelectorAll("[type=subMenu][style*=display\\:block]"); 

I believe the equivalent in JQuery (I don’t use it) for both would be:

$("[type=subMenu][style*=display\\:block]"); 

If the only style that will ever be set inline on those tags is display then you can omit the * from the style attribute selector.

Источник

Is there a selector to exclude display: none elements?

If the display: block and the display: none parents are different classes, then you can select the buttons based on that.

Why do you want that? If an elements parent is display: none then it simply won’t render. It doesn’t matter what other properties are applied to it.

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)

6 Answers 6

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

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

It may be a solution, but not at all a good recommendation on standard as you are using inline styling.

Well maybe it’s a limitation of using inline style, but it’s a solution, otherwise we will be using JavaScript or jQuery for it.

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.

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.

Источник

select elements using display:block

This is the html content from which I want to select all elements inside report having display block using jQuery $(«#report:visible») does not work for me.

9 Answers 9

Maybe you can use this piece of jQuery :

$("#report div:visible").each(function() < console.log($(this).attr('id')); >); 

Careful, if elements inside invisible tab or something, its better to check css styles manually, as «visible» will not select those elements

This will select the direct children of #report that are visible. Without the space you’re selecting #report itself if it’s visible. (Without the > it’d target also the inputs.)

I thought child selection with > was now deprecated in favour of .children() . Or was the deprecation rescinded?

If the deprecation is still in force, then it must be buried away in some other part of the documentation, not where it should be.

My bad, a particular use of > was deprecated and now gets no mention in the documentation. Your code is fine though I think I would use $(«#report»).children(«div»).is(«:visible») .

This may help you with several selectors CSS Selectors.

As for your requirement, You can use this to select all div with display:block under the #report .

$('#report div[style*=display:block]') 

but I wouldn’t, I’d add a class as well to hook onto.

wouldn’t this only work if display: block; is set directly to the element. and only if just the display: block; is set ?

Yep. Also, only if there is a space, not sure if JS normalises that or not. This is a terrible way to do it, a class would be better.

If you are doing based on a style property, I would use a contains selector (*=) This would make the above syntax read $(«[style*=’display: block;’]») , also as already mentioned, you’ll have to consider the space after the colon : and also note I skipped the ending semicolon ;

You cannot directly select elements in CSS using a property value itself. You can however select by class. The best solution would be to use a class to assign display: block (such as a visible class) and then to select based on its presence or lack thereof.

The other way to do this is to select using the entire value of the style element. But the problem with this is that if you add other inline styles that selector will no longer work. You could then get into regex parsing the style attribute but in my opinion applying a visible or hidden class is far easier and will perform significantly better.

Note that another advantage of using the visible or hidden class is that you can turn it on and off with JavaScript very easily:

document.getElementById("id").classList.toggle("hidden"); 

Источник