n番目の子がブラウザによって無視されて

Question

私は4つのインスピレーションレンダリング<%= render @inspirations %>、持っている：

ビューコード

<div class="panel panel-default"> 
    <div class="panel-body"> 
    <%= link_to inspiration_path(inspiration) do %> 
     <%= inspiration.name %> 
    <% end %> 
    </div> 
</div> 

をしかし、私はborder:whiteを削除するに奇数番号の場合は左側に、偶数番号の場合は右側に表示されます（パネルが画面の端にぶつかる）。

あなたは間違ったセレクタにnth-childを適用しているブラウザ

CODE

.home-panels a:nth-child(odd) .panel-default { 
 
    border-left: 0px !important; 
 
} 
 
.home-panels a:nth-child(even) .panel-default { 
 
    border-right: 0px !important; 
 
} 
 
.home-panels {} .panel-default { 
 
    border: 2.5px white solid; 
 
} 
 
.panel-body {}

<div class="home-panels"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     <a href="/inspirations/37-testing-to-see-border"> 
 
     <div class="white-link">Testing to See Border</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     <a href="/inspirations/36-testing-words"> 
 
     <div class="white-link">Testing Words</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <a href="/inspirations/35"> 
 
     <img class="testing-image" alt="This is a Goal-Setter &amp; Bucket List Maker" src="/system/inspirations/images/000/000/035/original/IMG_5106.JPG?1466979374"> 
 
    </a> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <a href="/inspirations/34"> 
 
     <img class="testing-image" alt="This is a Goal-Setter &amp; Bucket List Maker" src="/system/inspirations/images/000/000/034/original/IMG_5073.JPG?1466810578"> 
 
    </a> 
 
    </div>

Answer 1

によって無視されている私はnth-childのために今持っている、ここにあなたの現在の選択です：

この規則は、あなたの現在のHTML与えられた仕事決して意味

あなたはaが.home-panelsの子だろうと言っている（OKである、altoughtは実際には壮大-子である）が、.panel-defaultの親（そうではないOK）、マークアップ。

ので、代わりにaのaの親であるとクラスpanel panel-defaultとdiv、である必要がありますどの兄弟panel panel-defaultとして。

.panel-default:nth-child(odd) { 
 
    border-left: 0px 
 
} 
 
.panel-default:nth-child(even) { 
 
    border-right: 0px 
 
} 
 
.panel-default { 
 
    background: url("//dummyimage.com/200x200"); 
 
    border: 3px red solid; 
 
    height:200px; 
 
    width:200px; 
 
    display:inline-block; 
 
    margin:2px 
 
}

<div class="home-panels"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     <a href="/inspirations/37-testing-to-see-border"> 
 
     <div class="white-link">Testing to See Border</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     <a href="/inspirations/36-testing-words"> 
 
     <div class="white-link">Testing Words</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <a href="/inspirations/35"> 
 
     <img class="testing-image" alt="This is a Goal-Setter &amp; Bucket List Maker" src="/system/inspirations/images/000/000/035/original/IMG_5106.JPG?1466979374"> 
 
    </a> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <a href="/inspirations/34"> 
 
     <img class="testing-image" alt="This is a Goal-Setter &amp; Bucket List Maker" src="/system/inspirations/images/000/000/034/original/IMG_5073.JPG?1466810578"> 
 
    </a> 
 
    </div>