A CSS selector to get last visible div
HtmlCssCss SelectorsHtml Problem Overview
A tricky CSS selector question, don't know if it's even possible.
Lets say this is the HTML layout:
<div></div>
<div></div>
<div></div>
<div style="display:none"></div>
<div style="display:none"></div>
I want to select the last div
, which is displayed (ie. not display:none
) which would be the third div
in the given example.
Mind you, the number of div
s on the real page can differ (even the display:none
ones).
Html Solutions
Solution 1 - Html
You could select and style this with JavaScript or jQuery, but CSS alone can't do this.
For example, if you have jQuery implemented on the site, you could just do:
var last_visible_element = $('div:visible:last');
Although hopefully you'll have a class/ID wrapped around the divs you're selecting, in which case your code would look like:
var last_visible_element = $('#some-wrapper div:visible:last');
Solution 2 - Html
The real answer to this question is, you can't do it.
Alternatives to CSS-only answers are not correct answers to this question, but if JS solutions are acceptable to you, then you should pick one of the JS or jQuery answers here.
However, as I said above, the true, correct answer is that you cannot do this in CSS reliably unless you're willing to accept the :not
operator with the [style*=display:none]
and other such negated selectors, which only works on inline styles, and is an overall poor solution.
Solution 3 - Html
Try
div:not([style*="display: none"]):last-child
Solution 4 - Html
If you can use inline styles, then you can do it purely with CSS.
I am using this for doing CSS on the next element when the previous one is visible:
div[style='display: block;'] + table { filter: blur(3px); }
Solution 5 - Html
I think it's not possible to select by a css value (display)
edit:
in my opinion, it would make sense to use a bit of jquery here:
$('#your_container > div:visible:last').addClass('last-visible-div');
Solution 6 - Html
Pure JS solution (eg. when you don't use jQuery or another framework to other things and don't want to download that just for this task):
<div>A</div>
<div>B</div>
<div>C</div>
<div style="display:none">D</div>
<div style="display:none">E</div>
<script>
var divs = document.getElementsByTagName('div');
var last;
if (divs) {
for (var i = 0; i < divs.length; i++) {
if (divs[i].style.display != 'none') {
last = divs[i];
}
}
}
if (last) {
last.style.background = 'red';
}
</script>
Solution 7 - Html
It is not possible with CSS, however you could do this with jQuery.
jQuery:
$('li').not(':hidden').last().addClass("red");
HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="hideme">Item 4</li>
</ul>
CSS:
.hideme {
display:none;
}
.red {
color: red;
}
jQuery (previous solution):
var $items = $($("li").get().reverse());
$items.each(function() {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
Solution 8 - Html
in other way, you can do it with javascript , in Jquery you can use something like:
$('div:visible').last()
*reedited
Solution 9 - Html
If you no longer need the hided elements, just use element.remove()
instead of element.style.display = 'none';
.
Solution 10 - Html
This worked for me.
.alert:not(:first-child){
margin: 30px;
}