Nikolaknot Nikolaknot - 6 months ago 13
CSS Question

I don't see why my :last-child selector isn't working as it should be



.user-panel {
border-bottom-color: #8F8F8F;
background-color: #FCFCFC;
border-style: solid;
border-width: 1px;
border-color: #D9D9D9;
float: left;
width: 257px;
margin-top: 40px;
border-bottom-color: #8F8F8F;
margin-right: 5px;
}

.user-panel-wrap:last-child {
margin-right: 0px;
}

.user-panel:hover {
background-color: #B2D195;
}

.user-panel-image {
margin: 5px auto;
display: block;
}

.user-panel-header {
font-size: 26px;
text-align: center;
margin: 0;
color: black;
}

.user-panel-paragraph {
color: #A0A09E;
margin: 0;
text-align: center;
font-size: 19px;
}

<div class="user-panel-wrap">
<a class="user-panel-link" href="#">
<div class="user-panel">
<img class="user-panel-image" src="pictures/tockici.jpg">
<p class="user-panel-header">SERVICES</p>
<p class="user-panel-paragraph">It's what we do!</p>
</div>
</a>

<a class="user-panel-link" href="#">
<div class="user-panel">
<img src="pictures/cart.png" alt="" class="user-panel-image">
<p class="user-panel-header">ORDER</p>
<p class="user-panel-paragraph">Start the process!</p>
</div>
</a>

<a class="user-panel-link" href="#">
<div class="user-panel">
<img src="pictures/faq.png" alt="" class="user-panel-image">
<p class="user-panel-header">FAQ</p>
<p class="user-panel-paragraph">Find some answers</p>
</div>
</a>

<a class="user-panel-link" href="#">
<div class="user-panel">
<img src="pictures/login.jpg" alt="" class="user-panel-image">
<p class="user-panel-header">LOG IN</p>
<p class="user-panel-paragraph">Current clients</p>
</div>
</a>
</div>





So, in my CSS I've used wrapped divs class to call last-child to remove the right margin, but for some reason i can't find the problem. Sorry if i didn't post in the best way, my first post here. :)

If I didn't explain something as I should, ask. :)

Answer

The :last-child pseudo selector is applied on your wrapping div here. As a result you select the wrapper that is the last child of its parent. And because you only created one wrapper, you just select the only one you have.

I suspect that you want to select the last child of this wrapper. To do this, you need to do .user-panel-wrap > :last-child. And because I also suspect that you want to set the margin not of the <a> tag but on the .user-panel, you should actually do .user-panel-wrap > :last-child .user-panel.

.user-panel {
  border-bottom-color: #8F8F8F;
  background-color: #FCFCFC;
  border-style: solid;
  border-width: 1px;
  border-color: #D9D9D9;
  float: left;
  width: 257px;
  margin-top: 40px;
  border-bottom-color: #8F8F8F;
  margin-right: 5px;
}

.user-panel-wrap > :last-child .user-panel {
  margin-right: 0px;
}

.user-panel:hover {
  background-color: #B2D195;
}

.user-panel-image {
  margin: 5px auto;
  display: block;
}

.user-panel-header {
  font-size: 26px;
  text-align: center;
  margin: 0;
  color: black;
}

.user-panel-paragraph {
  color: #A0A09E;
  margin: 0;
  text-align: center;
  font-size: 19px;
}
<div class="user-panel-wrap">
  <a class="user-panel-link" href="#">
    <div class="user-panel">
      <img class="user-panel-image" src="pictures/tockici.jpg">
      <p class="user-panel-header">SERVICES</p>
      <p class="user-panel-paragraph">It's what we do!</p>
    </div>
  </a>

  <a class="user-panel-link" href="#">
    <div class="user-panel">
      <img src="pictures/cart.png" alt="" class="user-panel-image">
      <p class="user-panel-header">ORDER</p>
      <p class="user-panel-paragraph">Start the process!</p>
    </div>
  </a>

  <a class="user-panel-link" href="#">
    <div class="user-panel">
     <img src="pictures/faq.png" alt="" class="user-panel-image">
      <p class="user-panel-header">FAQ</p>
      <p class="user-panel-paragraph">Find some answers</p>
    </div>
  </a>

  <a class="user-panel-link" href="#">
    <div class="user-panel">
      <img src="pictures/login.jpg" alt="" class="user-panel-image">
      <p class="user-panel-header">LOG IN</p>
      <p class="user-panel-paragraph">Current clients</p>
    </div>
  </a>
  </div>