質問: ### 前提・実現したいこと CSSで、「指定した属性を持たない要素の中でも最後の要素にスタイルを当てる」ということは実現できますでしょうか? 内でをいくつかdisplay:none;に設定しています。 display:noneを持つ以外ののうち、最後のにのみスタイルを適用したいです。 (下記例の場合、リスト3にのみスタイルを適用したいです。) なお、下記CSSを書いてみましたが、どの要素にもスタイルが適用されませんでした。 :not()より:last-of-typeの方が先に検索されてしまうということなのでしょうか・・・ ### 該当のソースコード ``` リスト1 リスト2 リスト3 リスト4 リスト5 ``` ``` ul li:not([style='display:none;']):last-of-type{ background-color:red; } ```
回答: CSSのセレクタは右から左に解釈されていくので、`:not([style="display:none;"])`のセレクタによって`:last-of-child`で指定している`リスト5`が除外されています。 HTMLの方を`リスト5`とすると、`:not([style="display:none;"])`から外れて`background-color:red;`が適用されることを確認できるはずです。 個人的には`:not([style="display:none;"])`がそもそも不要なのではないかと思うのですが、どのような意図があるのか教えて下されば解決に繋がる回答を出せるかもしれません。 ``` ul li:last-of-type { background-color: red; } ``` **追記** すみません、質問を勘違いしていました。 `リスト3`にスタイルを当てたいと書いてありますね...。 **追記** kei344さんが仰っているように、現状のCSSセレクタでは対応できません。 これに対応可能なJavaScriptを用意したので、よろしければ試してみてください。 確認しやすいようにHTMLごとコードを記載しておきます。 ``` example リスト1 リスト2 リスト3 リスト4 リスト5 ``` ちなみに、このコードは動的な変化(`display: none;`を動的に付け外しするなど)には対応していないので、そのような動的な処理がある場合にはそちらにも同様の処理を追加する必要があることに注意してください。