CODEWITHSUNDEEP
htmlcsscss-selectors
Steggie
Steggie

Reputation: 525

last-child not working css/html

I'm trying to have a row of four divs.

.frontpage {
  width: 240px;
  margin-bottom: 20px;
  margin-right: 50px;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.frontpage img {
  margin: 10px auto;
}

.frontpage a:last-child img {
  margin-right: 0;
}
<div class="frontpage">RETRO
  <br>
  <a href="retro/index.html">
    <img src="images/name1.jpg" alt="">
  </a>
  <p>TEXT</p>
  <div class="readmore"><a href="retro/index.html">READ MORE</a>
  </div>

  <div class="frontpage">RETRO
    <br>
    <a href="retro/index.html">
      <img src="images/name1.jpg" alt="">
    </a>
    <p>TEXT</p>
    <div class="readmore"><a href="retro/index.html">READ MORE</a>
    </div>

    <div class="frontpage">RETRO
      <br>
      <a href="retro/index.html">
        <img src="images/name1.jpg" alt="">
      </a>
      <p>TEXT</p>
      <div class="readmore"><a href="retro/index.html">READ MORE</a>
      </div>

      <div class="frontpage">RETRO
        <br>
        <a href="retro/index.html">
          <img src="images/name1.jpg" alt="">
        </a>
        <p>TEXT</p>
        <div class="readmore"><a href="retro/index.html">READ MORE</a>
        </div>

As you can see im trying to get that last div a 0px margin using last-child. But i can’t seem to get rid of the margin.

Upvotes: 2

Views: 118

Answers (2)

Nerdroid
Nerdroid

Reputation: 13966

adding the missing closing div to each solved the problem

.frontpage {
  width: 240px;
  margin-bottom: 20px;
  margin-right: 50px;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.frontpage img {
  margin: 10px auto;
}
.frontpage a:last-child img {
  margin-right: 0;
}
<div class="frontpage">RETRO
  <br>
  <a href="retro/index.html">
    <img src="images/name1.jpg" alt="">
  </a>
  <p>TEXT</p>
  <div class="readmore"><a href="retro/index.html">READ MORE</a>
  </div>
</div>

<div class="frontpage">RETRO
  <br>
  <a href="retro/index.html">
    <img src="images/name1.jpg" alt="">
  </a>
  <p>TEXT</p>
  <div class="readmore"><a href="retro/index.html">READ MORE</a>
  </div>
</div>

<div class="frontpage">RETRO
  <br>
  <a href="retro/index.html">
    <img src="images/name1.jpg" alt="">
  </a>
  <p>TEXT</p>
  <div class="readmore"><a href="retro/index.html">READ MORE</a>
  </div>
</div>

<div class="frontpage">RETRO
  <br>
  <a href="retro/index.html">
    <img src="images/name1.jpg" alt="">
  </a>
  <p>TEXT</p>
  <div class="readmore"><a href="retro/index.html">READ MORE</a>
  </div>
</div>

Upvotes: 1

emmanuel
emmanuel

Reputation: 9615

You have to move selector to .frontpage.

.frontpage:last-child {
  margin-right: 0;
}

Upvotes: 7

Related Questions