Last child / last of type not working on div

Question

I'm trying to change the last div's color. Neither last-child and last-of-type work. My code:

.blue-back {
  background-color:blue;
}

.blue-back:last-of-type {
  background-color:red;
}

.blue-back:last-child {
  background-color:red;
}

    <div class="row">
      <div class="col-md-4">
        <div class="blue-back">
          <p class="mb-0 text-center text-white">Fase</p>
          <p style="font-size:29px; font-weight:600;" class="mb-0 text-center text-white font-weight-600">1</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="blue-back">
          <p class="mb-0 text-center text-white">Fase</p>
          <p style="font-size:29px; font-weight:600;" class="mb-0 text-center text-white font-weight-600">1</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="blue-back">
          <p class="mb-0 text-center text-white">Fase</p>
          <p style="font-size:29px; font-weight:600;" class="mb-0 text-center text-white font-weight-600">1</p>
        </div>
      </div>
    </div>

You just need to make sure there are actually children within in a parent. In this case there is only one last-child called .blue-black per item — Ryan Mc, Oct 30 '19 at 13:02

score 3 · Accepted Answer · edited Oct 30 '19 at 13:33

3

It's because the last child of .blue-back is always the current item. You need to do:

.col-md-4:last-child .blue-back {
    background-color:red;
}

See a CodePen demo here: https://codepen.io/ryan_pixelers/pen/KKKXBaz

edited Oct 30 '19 at 13:33

TylerH

20,799
66
75
101

answered Oct 30 '19 at 12:55

Ryan Mc

833
1
8
25

Have you tried this and found it works? – Heretic Monkey Oct 30 '19 at 12:58
1

I know it works – Ryan Mc Oct 30 '19 at 13:00
Hi, i tried this and everything is still blue. nothing changes to red @RyanMc – Gago Oct 30 '19 at 13:05
Definitely does work https://codepen.io/ryan_pixelers/pen/KKKXBaz are you typing class names wrong @Gago ? – Ryan Mc Oct 30 '19 at 13:08
Yes u right it works. Thanks man. @RyanMc – Gago Oct 30 '19 at 13:12

Αntonis Papadakis · Answer 2 · 2019-11-06T12:14:49.267

You need to use the :last-child selector to .col-md-4 children of .row parent.

So you can use:

.row .col-md-4:last-child .blue-back {
  background-color: red;
}

or

.row > div:last-child .blue-back {
  background-color: red;
}

.blue-back {
  background-color: blue;
}

.row .col-md-4:last-child .blue-back {
  background-color: red;
}

    <div class="row">
      <div class="col-md-4">
        <div class="blue-back">
          <p class="mb-0 text-center text-white">Fase</p>
          <p style="font-size:29px; font-weight:600;" class="mb-0 text-center text-white font-weight-600">1</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="blue-back">
          <p class="mb-0 text-center text-white">Fase</p>
          <p style="font-size:29px; font-weight:600;" class="mb-0 text-center text-white font-weight-600">1</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="blue-back">
          <p class="mb-0 text-center text-white">Fase</p>
          <p style="font-size:29px; font-weight:600;" class="mb-0 text-center text-white font-weight-600">1</p>
        </div>
      </div>
    </div>

Last child / last of type not working on div

2 Answers2