1. ホーム
  2. ハイパーリンク

[解決済み] [Solved] 親の中の最後の子ではなく、特定のクラスを持つ最後の要素を選択するにはどうすればよいですか?

2022-04-19 02:35:30

質問

<div class="commentList">
   <article class="comment " id="com21"></article>
   <article class="comment " id="com20"></article>
   <article class="comment " id="com19"></article>
   <div class="something"> hello </div>
</div>

を選択したい #com19 ?

.comment {
    width:470px;
    border-bottom:1px dotted #f0f0f0;
    margin-bottom:10px;
}

.comment:last-child {
    border-bottom:none;
    margin-bottom:0;
}

を持つ限り、それは機能しません。 div.something をコメントリストの実際の最後の子として使用します。この場合、last-child セレクタを使用して、最後に出現した article.comment ?

jsFiddle

解決方法は?

:last-child は、問題の要素がコンテナの最後の子であり、特定のタイプの要素の最後でない場合にのみ機能します。そのためには :last-of-type

http://jsfiddle.net/C23g6/3/

ボルトクロックさんのコメントにあるように、これは最後の article のクラスを持つ最後の要素ではありません。 .comment .

body {
  background: black;
}

.comment {
  width: 470px;
  border-bottom: 1px dotted #f0f0f0;
  margin-bottom: 10px;
}

.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
<div class="commentList">
  <article class="comment " id="com21"></article>

  <article class="comment " id="com20"></article>

  <article class="comment " id="com19"></article>

  <div class="something"> hello </div>
</div>