AnthonyGalli.com AnthonyGalli.com - 5 months ago 13
Ruby Question

nth-child being ignored by the browser in bootstrap panels

I have

<%= render @inspirations %>
, which renders 4 inspirations:

enter image description here

VIEW CODE

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


But I want to remove the
border:white
on the left side for odd number and on the right side for even number inspirations (this way the panels touch the edges of the screen).

What I have right now for
nth-child
is being ignored by the 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>




Answer

You are applying the nth-child to wrong selector, take a look why:

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

You are saying the a would be child of .home-panels (which is OK), but parent of .panel-default(not OK), so this rule would never work given your html markup.

So, instead of the a has to be the div with class panel panel-default, which is the parent of the a and which as siblings 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>