質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.34%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 4,751
nae_stage

nae_stage

score 69

前提・実現したいこと

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

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

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

該当のソースコード

<ul>
 <li style='display:none;'>リスト１</li>
 <li>リスト２</li>
 <li>リスト３</li>
 <li style='display:none;'>リスト４</li>
 <li style='display:none;'>リスト５</li>
</ul>
ul li:not([style='display:none;']):last-of-type{
    background-color:red;
}

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2 件

link

checkベストアンサー

+3

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;"])がそもそも不要なのではないかと思うのですが、どのような意図があるのか教えて下されば解決に繋がる回答を出せるかもしれません。 

ul li:last-of-type {
  background-color: red;
}


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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>example</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.last-child {
  background-color: red;
}
</style>
<script type="text/javascript">
;( function() {
  // displayプロパティの値がnoneではない最後の子要素にクラスを追加する関数
  function visible_last_child() {
    // .visible-last を与えられた要素(ul)を取得
    var elements = document.getElementsByClassName('visible-last');
    // 要素(ul)の数を取得
    var l = elements.length;
    // for ループ処理用の変数を宣言
    var element, children, c, child, target;

    // .visible-last を与えられた要素(今回はul要素に指定)を個別に取得するためのループ
    for (var i = 0; i < l; ++i) {
      // 個別の要素(ul)を取得
      element = elements[i];
      // 子要素(li)を取得
      children = element.children;
      // 子要素(li)の数を取得
      c = children.length;

      // 子要素(li)を個別に取得するためのループ
      for (var j = 0; j < c; ++j) {
        // 子要素(li)を個別に取得
        child = children[j];

        // displayプロパティの値がnone以外の子要素を取得
        if (child.style.display !== 'none') {
          // 変数targetに子要素を代入
          target = child;
        }
      }

      // 変数targetに最後に代入された要素にクラスを追加
      // 他のクラスがあるときはスペースを空けて.last-childを追加
      if (target.className) {
        target.className = target.className + ' last-child';

      // 他にクラスがないときはそのまま.last-childを追加
      } else {
        target.className = 'last-child';
      }
    }
  }

  // DOMを読み込み終えたときにvisible_last_child()を実行
  document.addEventListener('DOMContentLoaded', visible_last_child, false);
}());
</script>
</head>
<body>
<!-- .visible-lastを追加した要素が対象になる -->
<ul class="visible-last">
  <li style="display:none;">リスト１</li>
  <li>リスト２</li>
  <li>リスト３</li><!-- displayプロパティの値がnoneである要素を除いた最後の要素に.last-childが追加される -->
  <li style="display:none;">リスト４</li>
  <li style="display:none;">リスト５</li>
</ul>
</body>
</html>


ちなみに、このコードは動的な変化(display: none;を動的に付け外しするなど)には対応していないので、そのような動的な処理がある場合にはそちらにも同様の処理を追加する必要があることに注意してください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/20 08:16

    分かりやすい回答ありがとうございます！
    現状のCSSでは不可能なのですね・・・
    javascriptのコードもありがとうございます。大変助かります！
    さっそく試してみようと思います！

    キャンセル

link

+2

:last-of-type はタイプ（タグ）の中の最後なので、:not で「絞り込んだ物の中の最後」という挙動にはなりません。

【:last-of-type - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:last-of-type

そのため、CSS でご質問の挙動は不可能だと思います。style="display:none;" と書かれているので、サーバ側もしくはJavaScript で出力されているとは思うのですが、そちらで解決されたほうがよいでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/20 08:19

    分かりやすい回答ありがとうございます！
    「:notで「絞り込んだ物の中の最後」という挙動にはならない」という点、勘違いしておりましたので、大変勉強になりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 88.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る