css - ul li の直接の子ではない要素に css last-child を適用する

Question

私はこのHTMLを持っています -

<ul class="parent">
<li>
    <div class="child-1 x">
        <div class="child-2 x">test</div>
    </div>
</li>
<li>
    <div class="child-1 x">
        <div class="child-2 x">test</div>
    </div>
</li>
<li>
    <div class="child-1 x">
        <div class="child-2 x">test</div>
    </div>
</li>
</ul>

そしてこのCSS -

.x{
    border:1px solid black;
    padding: 10px;
}
.child-1:last-child{
    border-color:red;
}

http://jsfiddle.net/BDj2h/1/

最後にのみ赤い枠線を適用しようとしていますchild-1 div。しかし、それは起こっていません。CSSlast-child疑似クラスは、DOM全体ではなく、直接の親内の最後の要素かどうかをチェックします(これは私の間違った理解でした)。

CSSのみでこれを行う方法はありますか?

Answer 1

li:last-child .child-1

同じ効果があります。

JSFiddle

Answer 2

:last-child¹疑似は、最後に宣言された を尊重せずclass、親子関係で要素の最後のインスタンスを追跡するだけです。

¹と同じ:nth-last-child(1)。:last-child 擬似クラスは、他の要素の最後の子である要素を表します。

たとえば、次のようなものがある場合

のようなものを書く

div.wrap div.blow:last-child {
   /* .blow doesn't make any sense there, CSS will look up 
       for last div element nested inside .wrap */
}

この場合、使用してみることができます

.parent li:last-child div[class^="child-1"] {
    border-color:red;
}

または単に

.parent li:last-child div.child-1.x {
   border-color:red;
}

デモ

---

注:last-child親要素の最後の子要素でない場合は単に要素を無視するため、やや緩やかな疑似です。ここでは、 DOM レベルに関係なく を選択するlast-of-typeアクションが実行されます。last typeelement

Answer 3

ul li:last-child > div.child-1 {
    border-color:red;
}

例: http://jsfiddle.net/BDj2h/3/