最後のタイプ/最後のクラスのクラスの子ですか？

Question

CSSだけで2nd warranty-boxクラスを選択することはできますか？私はlast-of-typeとlast-childの組み合わせを試しましたが、私は動作するものは考えていません。

「行」と「列」ラッパーは、兄弟スタイルの関係を破りますlast-of-typeとlast-childに依存しています。

私は、.warranty .warranty-box:last-of-typeのような組み合わせを試しましたが、私はどちらかまたは両方を選択しているようです。

この時点で私の脳は痛いです。

<section class="warranty"> 
    <div class="row"> 
     <div class="medium-centered medium-10 large-8 columns"> 
      <div class="warranty-box"> 
       <h2>All New Homes Include</h2> 
       <ul> 
        <li>7-Year Warranty*</li> 
        <li>107 Point Final Inspection</li> 
        <li>CSP (Customer Service Program)</li> 
        <li>Delivery Anywhere in Ohio**</li> 
        <li>Base Set Installation</li> 
        <li>Roll on/Beams-Guide System Set</li> 
        <li>Central Air Conditioning</li> 
        <li>Gutters and Downspouts</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="medium-centered medium-10 large-6 columns"> 
      <div class="warranty-box"> 
       <h2>Pre-Existing Homes Include</h2> 
       <ul> 
        <li>1, 2, or 3-Year Warranty on Qualified Homes*</li> 
        <li>107 Point Final Inspection</li> 
        <li>Central Air Conditioning</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</section> 

Answer 1

最後の要素をタイプ別に取得し、そのクラスをターゲットにすることができます。

DEMO https://jsfiddle.net/2362mjox/1/

.warranty > div:last-of-type .warranty-box { 
    background: red; 
} 

上記のコードはwarranty