【jQuery】フィルタリングで表示するニュース記事の一部だけ特定のcssを適用したい

実現したいこと

ボタンを押したらボタンに対応した記事が表示されるようなコンテンツについて、
添付の画像のように、表示された最後の記事だけborder-bottom:0にしたいです。

buttonタグのvalue属性と、カテゴリアイコン（.icon）のクラス名を対応させて表示させています。

発生している問題・分からないこと

単純に「.list-item」に「:last-child」でCSSを指定してもうまくいかず、他に代案が思いつかず、困っています。ご教授いただけますと幸いです。

該当のソースコード

<!-- CSS -->
    .icon{
      border: 1px solid;
      font-size: 12px;
      margin-right: 1em;
    }
    .list-item{
      border-bottom: 1px solid;
      padding: .5em;
    }
  </style>

<!-- HTML -->
  <div class="btn-group">
    <button class="btn" value="all" type="button">全カテゴリ</button>
    <button class="btn" value="one" type="button">カテゴリ1</button>
    <button class="btn" value="two" type="button">カテゴリ2</button>
    <button class="btn" value="three" type="button">カテゴリ3</button>
  </div>
  <ul class="list">
    <li class="list-item"><span class="icon one">カテゴリ1</span>内容1内容1内容1</li>
    <li class="list-item"><span class="icon two">カテゴリ2</span>内容2内容2内容2</li>
    <li class="list-item"><span class="icon two">カテゴリ2</span>内容2内容2内容2</li>
    <li class="list-item"><span class="icon three">カテゴリ3</span>内容3内容3内容3</li>
    <li class="list-item"><span class="icon three">カテゴリ3</span>内容3内容3内容3</li>
    <li class="list-item"><span class="icon three">カテゴリ3</span>内容3内容3内容3</li>
  </ul>

<!-- JS -->
    $(function () {
      $(".btn").click(function () {
        let target = $(this).attr("value");
        $(".list-item").each(function () {
          $(this).animate({ "opacity": 0 }, 300, function () {
            $(this).hide();
            if ($(this).find(".icon").hasClass(target) || target == "all") {
              $(this).show().animate({ "opacity": 1 }, 300);
            }
          })
        })
      })
    })

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

teratailで「フィルタリング　〇〇」等検索しましたが、同様の質問が見つかりませんでした。

補足

※jQueryは最新のバージョンを使用しております。

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

回答3件

ベストアンサー

提示されたHTML、JavaScriptを変更せずにCSSだけで対応する場合

:last-childはHTML上の最後の要素が対象なので、このHTMLだと最後の<li>だけが対象になります。
非表示にしていても関係ありません。

「表示された<li>の最後だけ対象外にする」というのをCSSで表現する方法はおそらく無いと思います。
:has()を使えばできなくもないですが、まだFirefoxで対応したばかりなので却下。

「表示された<li>の最初だけ対象外にする」というのは可能なのでこちらで対処します。
ただ、:first-childや:fist-of-typeは先に説明した通り使えませんので下記のようにします。

CSS
1.list-item{
2  /* border-bottom: 1px solid; */
3  padding: .5em;
4}
5.list-item:not([style*="none"]) + .list-item:not([style*="none"]){
6  border-top: 1px solid;
7}

jQueryのhide()で非表示にしているので、非表示にした<li>は

HTML
1<li class="list-item" style="display:none;">

のようになっています。
逆に表示された<li>は

HTML
1<li class="list-item"> // 初期状態
2<li class="list-item" style="display:list-item;"> // show()とした場合

の2パターンあります。
なので「表示された<li>」をCSSでは「styleにnoneが無いもの」としてます。
表示された<li>の次の表示された<li>にスタイルを適用する事で先頭は対象外になります。

追記

:nth-last-childにこんな使い方があるのを知りませんでした。
これを使えば「表示された<li>の最後」をCSSで表現できますね。

CSS
1.list-item{
2  border-bottom: 1px solid;
3  padding: .5em;
4}
5.list-item:nth-last-child(1 of :not([style*="none"])){
6  border-bottom: none;
7}

こちらの方が理解しやすいかな。

投稿2024/02/16 20:58

編集2024/02/17 03:48

CTRL-S

総合スコア176

pon

2024/02/17 03:51

いただいたコードを使用してみたところ、無事に解決しました！コードについての説明も大変わかりやすく、参考になりました。ありがとうございました！

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

こうでしょうか。

css
1/* 追加 */
2.list-item:last-child,
3.list-item:nth-last-child(1 of .show) {
4    border-bottom: 0px solid;
5}

js
1$(this).animate({ "opacity": 0 }, 300, function () {
2    $(this).hide().removeClass('show'); /* 追加 */
3    if ($(this).find(".icon").hasClass(target) || target == "all") {
4        $(this).show().animate({ "opacity": 1 }, 300).addClass('show'); /* 追加 */
5    }
6})

投稿2024/02/17 02:12

編集2024/02/17 02:14

Lhankor_Mhy

総合スコア36117

pon

2024/02/17 03:57

ご回答ありがとうございます。いただいたコードを試してみたところ、問題が解決できました！ (1 of .show)という指定の仕方があることは初めて知りました……指定の仕方って色々あるんですね。ベストアンサーの方は回答が早かった方につけさせていただきましたが、こちらのコードも今後の参考とさせていただきます！

Lhankor_Mhy

2024/02/17 04:29

Safari 以外のブラウザが対応したのはここ1,2年のことなのでご存じなくても無理はないです。 https://caniuse.com/css-nth-child-of

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

cssでできませんか？

CSS
1<style>
2.list li:not(:last-child){
3  border-bottom:1px solid;
4}
5</style>
6<ul class="list">
7<li>aaa</li>
8</ul>
9<hr>
10<ul class="list">
11<li>aaa</li>
12<li>bbb</li>
13</ul>
14<hr>
15<ul class="list">
16<li>aaa</li>
17<li>bbb</li>
18<li>ccc</li>
19</ul>
20<hr>