n-te-Kind durch den Browser in Bootstrap-Panels ignoriert

Question

Ich habe <%= render @inspirations %>, die 4 Inspirationen macht:

VIEW CODE

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

Aber ich will die border:white entfernen auf der linken Seite für ungerade Zahl und auf der rechten Seite für geradzahlige Inspirationen (so berühren die Panels die Ränder des Bildschirms).

Was ich habe jetzt für nth-child wird vom Browser

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>

die nth-child,

Answer 1

Sie bewerben sich hier zu falschen Wähler ignoriert ist Ihr Stromselektors :

.home-panels a:nth-child(odd) .panel-default 

Sie sagen, die a Kind von .home-panels seien (was in Ordnung ist, ist altought Tatsache in einem Enkelkind), aber Eltern von .panel-default (also nicht OK), die auf diese Regel bedeutet, würde niemals Ihre aktuellen HTML gegebenen Arbeits Markup.

Also, statt der a hat die div mit Klasse panel panel-default, sein, die die Eltern des a ist und die als Geschwister 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>