web-dev-qa-db-ja.com

：最後の子が期待どおりに動作しませんか？

問題はこの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要素をターゲットにすべきではありませんか？

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>
htmlcsshtml5css3css-selectors
62
Nej Kutcharian

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にはliであってもclass='complete'がないため、次のセレクターはマークアップに対して機能しません。

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

マークアップの最後のliにもclass='complete'が含まれていれば（そしてその場合にのみ）うまくいきました。

comments でクエリに対処するには：

@Harry私はかなり奇妙だと思います：.complete：last-of-typeは機能しませんが、親要素の位置に関係なく、.complete：first-of-typeは機能します。ご協力いただきありがとうございます。

セレクター.complete:first-of-typeは、親（つまり、class='complete'を持つ要素）が依然として親内のli型の最初の要素であるため、フィドルで機能します。 ulの下の最初の要素として<li>0</li>を追加しようとすると、first-of-typeもフロップすることがわかります。これは、first-of-typeおよびlast-of-typeセレクターが、親の下の各タイプの最初/最後の要素を選択するためです。

セレクターの機能の詳細については、BoltClockが投稿した this threadの回答を参照してください。それは包括的です:)

112
Harry

：last-childは、要素が非常に最後の要素でない場合は機能しません

ハリーの答えに加えて、要素がコンテナ内の非常に最後の要素でない場合、：last-childは機能しないことを追加/強調することが重要だと思います。なんらかの理由でそれを実現するのに何時間もかかり、ハリーの答えは非常に徹底的であるにもかかわらず、「最後の子セレクターは親の最後の子要素を選択するために使用されます。」

これが私のセレクタであるとします：a:last-child {}

これは動作します：

<div>
    <a></a>
    <a>This will be selected</a>
</div>

これはしません：

<div>
    <a></a>
    <a>This will no longer be selected</a>
    <div>This is now the last child :'( </div>
</div>

a要素がその親内の最後の要素ではないためです。

それは明らかかもしれませんが、それは私のためではありませんでした...

78
Govind Rai

同様の状況に遭遇しました。次のような要素で黄色になるように、最後の.itemの背景を持ちたいです...

<div class="container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  ...
  <div class="item">item x</div>
  <div class="other">I'm here for some reasons</div>
</div>

私はそれを達成するためにnth-last-child(2)を使用します。

.item:nth-last-child(2) {
  background-color: yellow;
}

アイテムのn番目の最後の子が最後のアイテムの2番目であると想定しているが、それは機能し、期待どおりの結果が得られたため、私には奇妙です。 CSS Trick からこの便利なトリックを見つけました

0
worrawut