A CSS selector to get last visible div

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 divs on the real page can differ (even the display:none ones).

Answer

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');

Leave a Reply

Your email address will not be published. Required fields are marked *