Css: How to Say .Class:Last-Of-Type [Classes, Not Elements!]

CSS: How to say .class:last-of-type [classes, not elements!]

Unfortunately finding the last .class is not possible with last-of-type.

Edit:
To actually add something constructive to this answer, you could fallback to JavaScript to locate this selector, or revise your markup/CSS. Whilst I have found myself in the situation that last-of-type for a class selector would be useful, it's nothing that cannot be worked around with a little more thought.

How to select the last of the class

You can do something like this:

Source: last

$(document).ready(function(){
  $(".selected:last").css("background-color", "yellow");
 });

enter image description here

another way of using it:

$(document).ready(function(){  
  $( ".selected" ).last().css({ backgroundColor: "yellow", fontWeight: 
  "bolder" });
});

enter image description here

UPDATE-1

here is why the utopian-selector will not work in you case.

check this example:

.selected:last-of-type {  background: hotpink;}

<ul>  <li class="selected">un</li>  <li class="selected">deux</li>  <li class="selected"> ---- I want select that one ----- </li></ul>

Why is only 1 out of 2 last-of-type CSS working

last-of-type selects the last element with that type (not class, not id), so while you are expecting .platinum:last-of-type to select the last element with class platinum (which is not necessarily the last element of that type), it is selecting the element which has the platinum class AND is the last child element with that type in its parent. In your case, that type is a <div>, but it could've as well been a <section> or something else.

Currently the CSS specification does not define such a selector that does what you are aiming for, so you will need to introduce some javascript to dynamically select the elements you want.

Get last instance of a class under a parent with CSS

:last-child only works when the element in question is the last child of the container, not the last of a specific type of element. We could have used last-of-type

Unfortunately finding the last .class is not possible with last-of-type.

We need to use javascript in order to achieve the result.

Applying CSS styles only to the lowest instance of a class

CSS does not support any parent selectors. You will have to use JQuery to achieve your requirement.

For example you can write the below code to make yours work

In Css give

li.active{ color: "#ff0000";}

In Jquery

$(".active").has(".active").css("color","#000000");

This will make all elements with class active to have text color as red and once that have another element with class active to have text color black

Css: How to Say .Class:Last-Of-Type [Classes, Not Elements!]