[解決済み] :last-child が期待通りに動作しない？

質問

問題は、このCSSとHTMLの中にあるのです。以下は jsFiddleへのリンク をサンプルコードとともにご紹介します。

HTML

<ul>
    <li class"complete">1</li>
    <li class"complete">2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

li.complete:last-child {
    background-color:yellow;
}

li.complete:last-of-type {
    background-color:yellow;
}

これらのCSSの行は、どちらか一方が 最後のli要素に"complete"クラスが設定されています。 ?

jQueryのこのクエリも対象外です。

$("li.complete:last-child");

でも、これはそうなんです。

$("li.complete").last();

li {
  background-color: green;
}
li.complete:first-child {
  background-color: white;
}
li.complete:first-of-type {
  background-color: red;
}
li.complete:last-of-type {
  background-color: blue;
}
li.complete:last-child {
  background-color: yellow;
}

<ul>
  <li class="complete">1</li>
  <li class="complete">2</li>
  <li>3</li>
  <li>4</li>
</ul>

解決方法は？

その last-child セレクタは、親の最後の子要素を選択するために使用されます。ある親要素の下にある、特定のクラスを持つ最後の子要素を選択するためには使用できません。

複合セレクタのもう一つの部分（これは :last-child には、最後の子要素が選択されるために満たすべき追加の条件を指定します。以下のスニペットでは、複合セレクタの残りの部分によって、選択される要素がどのように異なるかがわかります。

.parent :last-child{ /* this will select all elements which are last child of .parent */
  font-weight: bold;
}

.parent div:last-child{ /* this will select the last child of .parent only if it is a div*/
  background: crimson;
}

.parent div.child-2:last-child{ /* this will select the last child of .parent only if it is a div and has the class child-2*/
  color: beige;
}

<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child-2'>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <p>Child w/o class</p>
</div>

ご質問の答えですが、以下のようにすると最後の子プロセスのスタイルが決まります。 li 要素の背景色を赤にしています。

li:last-child{
    background-color: red;
}

しかし、次のセレクタはあなたのマークアップでは機能しません。 last-child には class='complete' であるにもかかわらず li .

li.complete:last-child{
    background-color: green;
}

があれば（あればこそ）うまくいったのですが、最後の li をマークアップしています。 class='complete' .

の問い合わせに対応するために コメント :

.complete:last-of-typeは機能せず、.complete:first-of-typeは親要素の位置に関係なく機能するというのはかなり奇妙な気がします。ご助力ありがとうございます。

セレクタ .complete:first-of-type がフィドルで動作するのは、それが（つまり、要素が class='complete' の最初の要素であることに変わりはありません。 li を親の中に入れてください。試しに <li>0</li> の下の最初の要素として ul をクリックすると、その first-of-type もフロップします。これは first-of-type と last-of-type セレクタは、親要素の下にある各タイプの最初と最後の要素を選択します。

BoltClockさんの投稿された回答を参考にすると これ のスレッドで、セレクタがどのように機能するかについて、より詳細な情報を得ることができます。これだけあれば十分です :)