Selecting last visible child using css

Question

How to select last visible child using css

<div>
   <span>1</span>
   <span>2</span>
   <span>3</span> <!— last visible child —>
   <span style=“display:none”>4</span>
   <span style=“display:none”>5</span> <!— last child —>
</div>

Answer 1

Using jquery you can add css for last visible child

$('span:visible:last').css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <!— last visible child —>
  <span style='display:none'>4</span>
  <span style='display:none'>5</span>
  <!— last child —>
</div>