ラスト・チャイルドはクラスで作業していません。最後の型もうまくいきません

Question

私はstyle.cssファイル内の：同じクラスを持つ一連のワードプレス投稿のlast-childを選択しようとしています。 は、ここに私の文書構造の簡略版である：私はこれを試してみました

<div id="container"> 
    <div id="content"> 
    <!--start .post--> 
    <div id="post-33" class="hentry p1 post"> 
      <h2 class="entry-title"><a href="url">Post 1</a></h2> 
      <div class="entry-content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
     </div> 
    <!--end .post --> 
    <!--start .post--> 
    <div id="post-24" class="hentry p1 post"> 
    <h2 class="entry-title"><a href="url">Post 2</a></h2> 
    <div class="entry-content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
    </div> 
    <!--end .post --> 
    <!--start .post--> 
    <div id="post-24" class="hentry p1 post"> 
    <h2 class="entry-title"><a href="url">Post 3</a></h2> 
    <div class="entry-content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
    </div> 
    <!--end .post --> 

     <div id="nav-below" class="navigation"> 
      <div class="nav-previous"></div> 
      <div class="nav-next"></div> 
     </div> 
    </div><!-- #content --> 
</div><!-- #container --> 

、それはして正常に動作しますが：最後の子：最初の子セレクターそれはで全く動作しません。

.post .entry-content { 
    background-color: pink; 
    border-bottom: 2px solid; 
} 

.post:first-child .entry-content { 
    background-color: red; 
    border-bottom: 0px solid; 
} 

.post:last-child .entry-content { 
    background-color: yellow; 
    border-bottom: 0px solid; 
} 

どのような考えですか？ 私のサイトのライブバージョンは以下の通りです：http://dev.visualvisual.com/

Answer 1

nth-of-typeとnth-last-of-typeを使用してください。名前は子供たちに動作させるために、提案するよう

.post:nth-of-type(1) .entry-content { 
    background-color: red; 
    border-bottom: 0px solid; 
} 

.post:nth-last-of-type(2) .entry-content { 
    background-color: yellow; 
    border-bottom: 0px solid; 
} 

first-childとlast-childは、あるので、あなたは（必ずしも.postが）最後の要素を見つけるために#content:last-childを使用したいと思います。

Codepen