CSSセレクタ：Last-child not working

Question

次の例では、first-childセレクタは機能し、last-childは機能しません。添付のスクリーンショットをご覧ください。

問題：私のクラス "gotit"はバーグリーンに、クラス "go4"はグレーに色付けされています。最後は赤でなければなりません。シンプルに聞こえますか？

だから今で掘る：私は最初の子を選択しようとした場合、それは魔法のように動作します：

私は最後の子を選択しようとすると、それだけで何もしません。

誰でもここでヒントが間違っていますか？前もって感謝します！

Answer 1

.gotitが実際に.parentの最後の子であることを確認してください。以下のように。

.inner { 
 
    min-width: 50px; 
 
    min-height: 20px; 
 
    background-color: gray; 
 
    float: left; 
 
    margin: 2px; 
 
} 
 
.inner:last-child { 
 
    background-color: red; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
</div>

されていない場合は、.gotitで:last-childを使用すると、動作しません。下記参照。

.inner, 
 
.inner-other { 
 
    min-width: 50px; 
 
    min-height: 20px; 
 
    background-color: gray; 
 
    float: left; 
 
    margin: 2px; 
 
} 
 
.inner:last-child { 
 
    background-color: red; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner-other"></div> 
 
    <div class="inner-other"></div> 
 
    <div class="inner-other"></div> 
 
</div>

私はあなたのマークアップを推測しているが、上記のマークアップのように見えます。要素を再グループ化して、:last-childまたは:last-of-typeが機能するようにしてください。以下のようなもの。

.inner div, 
 
.inner-other div { 
 
    min-width: 50px; 
 
    min-height: 20px; 
 
    background-color: gray; 
 
    float: left; 
 
    margin: 2px; 
 
} 
 
.inner div:last-child { 
 
    background-color: red; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
    <div class="inner-other"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
</div>