指定した属性を持たない要素の中でも最後の要素にスタイルを当てたい

###前提・実現したいこと
CSSで、「指定した属性を持たない要素の中でも最後の要素にスタイルを当てる」ということは実現できますでしょうか？

<ul>内で<li>をいくつかdisplay:none;に設定しています。 display:noneを持つ<li>以外の<li>のうち、最後の<li>にのみスタイルを適用したいです。（下記例の場合、<li>リスト３</li>にのみスタイルを適用したいです。）

なお、下記CSSを書いてみましたが、どの要素にもスタイルが適用されませんでした。
:not()より:last-of-typeの方が先に検索されてしまうということなのでしょうか・・・

###該当のソースコード

HTML
1<ul>
2 <li style='display:none;'>リスト１</li>
3 <li>リスト２</li>
4 <li>リスト３</li>
5 <li style='display:none;'>リスト４</li>
6 <li style='display:none;'>リスト５</li>
7</ul>

CSS
1ul li:not([style='display:none;']):last-of-type{
2    background-color:red;
3}

行動規範の内容に同意します

回答2件

ベストアンサー

CSSのセレクタは右から左に解釈されていくので、:not([style="display:none;"])のセレクタによって:last-of-childで指定している<li style='display:none;'>リスト５</li>が除外されています。
HTMLの方を<li>リスト５</li>とすると、:not([style="display:none;"])から外れてbackground-color:red;が適用されることを確認できるはずです。
個人的には:not([style="display:none;"])がそもそも不要なのではないかと思うのですが、どのような意図があるのか教えて下されば解決に繋がる回答を出せるかもしれません。

CSS
1ul li:last-of-type {
2  background-color: red;
3}

追記
すみません、質問を勘違いしていました。
<li>リスト３</li>にスタイルを当てたいと書いてありますね…。

追記
kei344さんが仰っているように、現状のCSSセレクタでは対応できません。
これに対応可能なJavaScriptを用意したので、よろしければ試してみてください。
確認しやすいようにHTMLごとコードを記載しておきます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>example</title>
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<meta name="viewport" content="width=device-width, initial-scale=1.0">
8<style type="text/css">
9.last-child {
10  background-color: red;
11}
12</style>
13<script type="text/javascript">
14;( function() {
15  // displayプロパティの値がnoneではない最後の子要素にクラスを追加する関数
16  function visible_last_child() {
17    // .visible-last を与えられた要素(ul)を取得
18    var elements = document.getElementsByClassName('visible-last');
19    // 要素(ul)の数を取得
20    var l = elements.length;
21    // for ループ処理用の変数を宣言
22    var element, children, c, child, target;
23
24    // .visible-last を与えられた要素(今回はul要素に指定)を個別に取得するためのループ
25    for (var i = 0; i < l; ++i) {
26      // 個別の要素(ul)を取得
27      element = elements[i];
28      // 子要素(li)を取得
29      children = element.children;
30      // 子要素(li)の数を取得
31      c = children.length;
32
33      // 子要素(li)を個別に取得するためのループ
34      for (var j = 0; j < c; ++j) {
35        // 子要素(li)を個別に取得
36        child = children[j];
37
38        // displayプロパティの値がnone以外の子要素を取得
39        if (child.style.display !== 'none') {
40          // 変数targetに子要素を代入
41          target = child;
42        }
43      }
44
45      // 変数targetに最後に代入された要素にクラスを追加
46      // 他のクラスがあるときはスペースを空けて.last-childを追加
47      if (target.className) {
48        target.className = target.className + ' last-child';
49
50      // 他にクラスがないときはそのまま.last-childを追加
51      } else {
52        target.className = 'last-child';
53      }
54    }
55  }
56
57  // DOMを読み込み終えたときにvisible_last_child()を実行
58  document.addEventListener('DOMContentLoaded', visible_last_child, false);
59}());
60</script>
61</head>
62<body>
63<!-- .visible-lastを追加した要素が対象になる -->
64<ul class="visible-last">
65  <li style="display:none;">リスト１</li>
66  <li>リスト２</li>
67  <li>リスト３</li><!-- displayプロパティの値がnoneである要素を除いた最後の要素に.last-childが追加される -->
68  <li style="display:none;">リスト４</li>
69  <li style="display:none;">リスト５</li>
70</ul>
71</body>
72</html>