A CSS selector to get last visible div

Question

A tricky CSS selector question  don t know if it s even possible     Lets say this is the HTML layout      lt div gt  lt  div gt   lt div gt  lt  div gt     lt div gt  lt  div gt     lt div style  display none  gt  lt  div gt   lt div style  display none  gt  lt  div gt      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

User · Accepted 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');

User · Answer

Try  div not  style   display  none

User · Answer

It is not possible with CSS  however you could do this with jQuery    JSFIDDLE DEMO  jQuery      li   not   hidden   last   addClass  red      HTML    lt ul gt           lt li gt Item 1 lt  li gt           lt li gt Item 2 lt  li gt           lt li gt Item 3 lt  li gt           lt li class  hideme  gt Item 4 lt  li gt       lt  ul gt    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

User · Answer

If you no longer need the hided elements  just use element remove   instead of element style display    none

User · Answer

in other way  you can do it with javascript   in Jquery you can use something like      div visible   last      reedited

User · Answer

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

User · Answer

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  gt  div visible last   addClass  last-visible-div

User · Answer

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     lt div gt A lt  div gt   lt div gt B lt  div gt     lt div gt C lt  div gt     lt div style  display none  gt D lt  div gt   lt div style  display none  gt E lt  div gt        lt script gt  var divs   document getElementsByTagName  div    var last   if  divs        for  var i   0  i  lt  divs length  i              if  divs i  style display     none                 last   divs i                                 if  last        last style background    red      lt  script gt    http   jsfiddle net uEeaA 90

User · Answer

This worked for me     alert not  first-child       margin  30px

User · Answer

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

[html] A CSS selector to get last visible div

Examples related to html

Examples related to css

Examples related to css-selectors