How to select the last of the class

Question

I would like to select the last one from li.selected but the utopian selector

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

doesn't work at all.

<ul>
  <li class="selected">un</li>
  <li class="selected">deux</li>
  <li class="selected"> ---- I want select that one ----- </li>
  <li class="foo">quatre</li>
  <li>cinq</li>
  <li class="tang">six</li>
</ul>

I cannot use the following selector

.selected:nth-child(3) {
  background: hotpink;
}

because it's for a dynamic application so, How can I proceed only with css selectors?

Thank you in advance ;)

Answer 1

You can do something like this:

Source: last

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

OR

another way of using it:

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

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>

if you observe the example, if you remove the remaining list(li) post selected class, it works by your way.

why it is not working

:last-of-type It targets a particular type of element in a particular arrangement with relation to similar siblings, not all siblings.

so, since there were other siblings apart from selected in your list hence it was not able to pick that color because it didn't find the element of selected class at the end, hope it make sense now.

Answer 2

Not exactly sure, but I think you are trying to do something like this:

ul li:nth-last-of-type(1){background:red}
ul li:nth-last-of-type(3){background:blue}

<ul>
  <li class="selected">un</li>
  <li class="selected">deux</li>
  <li class="selected"> ---- I want select that one ----- </li>
  <li class="foo">quatre</li>
  <li>cinq</li>
  <li class="tang">six</li>
</ul>

Note: For using nth-child or nth-last-of-type, you will have to make selection of element, for classes it won't work.

If you are trying to name the item and then count it from top or bottom, this won't work in CSS as per now.

Either you will have to use jQuery or some JavaScript library (for dynamic counting) or else you will have to point out element (somehow using CSS Selectors) and then make CSS changes.

Note: Current CSS3 specification does not provide selecting classes based on counting. So, if you are trying to count classes and use either of nth-child, nth-last-child, nth-of-type, nth-last-of-type you will be highly dissapointed as they will couunt based on Elements, for example ul li but will not take into consideration of class while counting, for example ul li.selected:nth-child(3). So, this will be rendered unuseful in your case.

Using jQuery:

You got 2 options - a) :last b) .last()

$(document).ready(function(){
  $('.selected:last').css('background', 'red')
  $( '.selected' ).last().css( "color", "blue" );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <ul>
      <li class="selected">un</li>
      <li class="selected">deux</li>
      <li class="selected"> ---- I want select that one ----- </li>
      <li class="foo">quatre</li>
      <li>cinq</li>
      <li class="tang">six</li>
    </ul>

Answer 3

You don't have the ability to use nth on a class-name:

In this snippet '.selected' is a class name. You must instead use the DOM element.

ul .selected:nth-of-type(3) {
    color: red;
}

you can only use this on DOM elements so you would want to use:

ul li:nth-of-type(3) {
    color: red;
}

I can appreciate this is a very simple answer, if you require further help creating a selector when you actually come to writing this into your site, let me know.

Answer 4

You can do something like this:

const selected = document.querySelectorAll('.selected');
const last = selected[selected.length-1];
last.classList.add('last');

Then update your css

.selected.last {
  background: hotpink;
}

The reason why the last-of-type selector is not working is because it only works for html elements, no class selectors :(

I guess you're sort of adding that .selected class given some rules, so when you add the selected class, you can also validate if it's the last element and add a class like .last

Probably, your best option would be to use javascript or add a second class to that .selected element.