display the last-of-type of 3 elements with SASS

Question

I have a problem with my SASS and notifications. I have 3 types of alert notifications (danger, warning, success), and I wish display the last-of-type of this 3 alerts (See image below with the right point). Thank you in advance for your response.

My SASS

#app-notification {

    top: inherit;
    bottom: 20px !important;

    .alert {
        padding: 10px;
        margin-bottom: 20px;
        border: 0;
        border-radius: 0;
        box-shadow: 0 0 4px rgba(0,0,0,.5);
        background: #fff;
        color: #263f5e;

        &:last-of-type { margin-bottom: 0; }

    }

    .alert-danger {
        border-bottom: 3px solid #ff3b30;
        strong { color: #ff3b30; }

    }

    .alert-warning {
        border-bottom: 3px solid #ffcc00;
        strong { color: #ffcc00; }
    }

    .alert-info {
        border-bottom: 3px solid #007aff;
        strong { color: #007aff; }
    }

    .alert-success {
        border-bottom: 3px solid #4cd964;
        strong { color: #4cd964; }
    }

}
// Test
#app-notification .alert-danger:not(:last-of-type) { opacity: .2; }
#app-notification .alert-success:not(:last-of-type) { opacity: .2; }
#app-notification .alert-warning(:last-of-type) { opacity: .2; }

Are all the element the same type (that is, are they all `div` or `span`)? If yes then the `last-of-type` pseudo will not work for you because as the naming implies, it selects only the last element of its type under the parent. The `class` selector that you attach to the pseudo is only an add-on condition. That is, it would select the last element of a type if it *also has* the given class and not select the last element which has the given class. — Harry, Jun 08 '16 at 09:10
Alls the element are `div`, with a common class `alert`, and other class `alert-TYPE`. Actually, only the `last-of-type`works, but not the `last-of-type` of each type. — Kevin Py, Jun 08 '16 at 09:14
Because `type` is not `class`. You're looking for `last-of-class` selector, which doesn't exist. Use JS for this issue. — Vucko, Jun 08 '16 at 09:15
I am thinking you've misunderstood the `last-of-type` selector. Type here refers to the element type and just that. So among your `alert` elements, all are of type `div` and so there is only one `last-of-type`. — Harry, Jun 08 '16 at 09:15

score 0 · Answer 1 · edited May 23 '17 at 11:58

As there is not :last-of-class selector in CSS, you'll need to use JS. Here's a simple JQuery solution, using :last selector:

$('.alert-danger:last, .alert-info:last, .alert-warning:last').addClass('last');

$('.alert-danger:last, .alert-info:last, .alert-warning:last').addClass('last');

.alert {
  padding: 10px;
  margin-bottom: 20px;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 4px rgba(0,0,0,.5);
  background: #fff;
  color: #263f5e;

  &:last-of-type { margin-bottom: 0; }

}

.alert-danger {
  border-bottom: 3px solid #ff3b30;
  strong { color: #ff3b30; }

}

.alert-warning {
  border-bottom: 3px solid #ffcc00;
  strong { color: #ffcc00; }
}

.alert-info {
  border-bottom: 3px solid #007aff;
  strong { color: #007aff; }
}

.last{
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="#app-notification">
  <div class="alert alert-danger">alert-danger</div>
  <div class="alert alert-danger">alert-danger</div>
  <div class="alert alert-info">alert-info</div>
  <div class="alert alert-danger">alert-danger</div>
  <div class="alert alert-info">alert-info</div>
  <div class="alert alert-warning">alert-warning</div>
  <div class="alert alert-warning">alert-warning</div>
  <div class="alert alert-danger">alert-danger</div>
</div>

JSFiddle

score 0 · Answer 2 · answered Jun 08 '16 at 09:46

Unfortunately not possible with pure CSS. You might wanna do it with JS as already shown, or (if you wanna stay with pure CSS), you might be able to reverse the items in the list and hide everything but the first of these classes like this:

.alert-danger ~ .alert-danger,
.alert-info ~ .alert-info,
.alert-warning ~ .alert-warning {
  display: none;
}

display the last-of-type of 3 elements with SASS

2 Answers2