title: CSS selector last visible child
body: <p>Is there a way in CSS to apply CSS rules to a last visible child without knowing the class which makes an element invisible?</p>
  
  <p>Example:</p>
  
  <pre><code>&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&gt;Item 4&lt;/li&gt;
    &lt;li style="display: none"&gt;Item 5&lt;/li&gt;
  &lt;ul&gt;
  
  &lt;style&gt;
    ul &gt; 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 &gt; li:last-child:not([style="display: none"]) {
      border-right: none;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>To be clear: I'm looking for a rule-based selector not class-based in CSS not Javascript. But this answer <a href="https://stackoverflow.com/questions/5275098/a-css-selector-to-get-last-visible-div#answer-13866306">A CSS selector to get last visible div</a> 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.</p>
  
  <p>Example in bootstrap (NOTE: hidden-md is an example, it could also be an other class which uses display:none):</p>
  
  <pre><code>&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&gt;Item 4&lt;/li&gt;
    &lt;li class="hidden-md"&gt;Item 5&lt;/li&gt;
  &lt;ul&gt;
  </code></pre>