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

CssCss Selectors

Css Problem Overview


> Possible Duplicate:
> How do I select the “last child” with a specific class name in CSS?

As the title says, i want to adress css rules to the last element of a certain type which has a certain class. The following code works perfectly:

div:last-of-type { margin-right:0; }

but i want something like

div.class:last-of-type { margin-right:0; }

How to do this ?

Css Solutions


Solution 1 - Css

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.

Solution 2 - Css

Make the nomargin a css class, and you can change it easily:

var items = document.getElementsByClassName('nomargin');
items[items.length-1].style.color = 'black';
items[items.length-1].style.background = 'white';

or if that doesn't have enough jQuery, you can use:

jQuery('div.nomargin:last').css({
    color:'black',
    background:'white'})

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSliqView Question on Stackoverflow
Solution 1 - CssamustillView Answer on Stackoverflow
Solution 2 - CssNoBugsView Answer on Stackoverflow