CSS selector last visible child [duplicate] - css

Question

This question already has answers here:
A CSS selector to get last visible div
(11 answers)
Closed 8 years ago.
Is there a way in CSS to apply CSS rules to a last visible child without knowing the class which makes an element invisible?
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li style="display: none">Item 5</li>
<ul>
<style>
ul > li {
border: 1px solid black;
}
// Remove right border from last visible child
// This does not work of course, but this is what I am looking for
ul > li:last-child:not([style="display: none"]) {
border-right: none;
}
</style>
To be clear: I'm looking for a rule-based selector not class-based in CSS not Javascript. But this answer A CSS selector to get last visible div for example does not work. The problem here is that :last-child and :not can not be combined. :last-child([style="display: block"]) also does not work (when li has dispay: block), because it looks at the style attribute and not at the CSS rule.
Example in bootstrap (NOTE: hidden-md is an example, it could also be an other class which uses display:none):
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li class="hidden-md">Item 5</li>
<ul>

Answer 1

It is not possible with CSS, however you could do this with jQuery. Try this clumsy code.
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;
}
});

Answer 2

From CSS it is not possible :)
maybe if you draw the right border from the left border of next element or next pseudo element , you get half of the job done :http://codepen.io/gc-nomade/pen/ohKwv/
/* basic and naive workaround for borders */
ul {
text-align:center;
}li {
display:inline-block;
padding:0 1em
}
li + li {
border-left:solid;
}
ul:hover li:nth-child(even) {/* test : hide every even lis at once */
display:none;
}