104

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 ?

Community
  • 1
  • 1
Sliq
  • 15,937
  • 27
  • 110
  • 143
  • 7
    No, selectors do not work here: [class='class']:last-of-type is understood as "last of type provided that it has this class", not as "last of those that have this class". – Alexander Gelbukh Jul 14 '15 at 20:00
  • 2
    You can try .myClass:nth-last-child(1) – Claytronicon May 03 '18 at 21:37
  • They worked on google chrome but only if it is also the last element, PERIOD, of the parent. Example: `

    ` `.a { border: 1px solid black;} .a:last-of-type { border: none }` does not work. Remove `

    ` making it `
    ` and it worked for me.     – Rock Lee Jul 31 '18 at 03:17

2 Answers2

91

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.

amustill
  • 5,274
  • 23
  • 15
  • Yes, using `:last-of-type` with a class selector alone is very unintuitive; it is best used with a type selector unless you really want the last of any type to have that class. – BoltClock Nov 03 '12 at 18:04
  • 7
    A possible jQuery fallback if you really do not want to add extra classes manually: `$('.class').last().addClass('last');` – fncombo Nov 03 '12 at 18:19
  • 5
    @amustill I totally agree, but in some cases you have no possibility to change the markup (add a class, put a div around something) because your client works with a shitty CMS that has no possility to create or change DOM stuff. This is the cruel reality. – Sliq Nov 03 '12 at 18:34
  • 2
    I have use a perfect workaround without js in pure HTML5: add your own markup,replacing your basic "div.class" let say : foo stuff and in your CSS : myMarkup:last-of-type{margin-right:0;} And it will work perfectly with most modern browser (IE+9 & all other) – CtrlX Mar 13 '14 at 02:39
  • 1
    In my case, it worked if the "last of type" was truly the last element in the parent container. When I had one other-typed element after the element in question, it did not work - at least, on Google Chrome where I tested it. – Rock Lee Jul 31 '18 at 03:14
  • for jQuery, best resetting before adding the last class: `$('.class').removeClass('last').last().addClass('last');` – eballeste Dec 07 '18 at 22:37
  • @BoltClock I know `.class:last-of-type` is not part of the CSS spec and that it still works in modern browsers, but for the sake of discussion, can you elaborate as to why it is unintuitive? I don't use it myself but it actually feels super intuitive to me and I wish it was part of the spec. – JohnFajardo Apr 26 '21 at 13:36
  • @JohnFajardo: The unintuitive part is the fact that "type" doesn't refer to "all the conditions specified by the selector", it refers to the element's tag name. If you have a parent element with some p.class and div.class children, .class:last-of-type matches both the last p.class and the last div.class, and not "the last .class element, period". You can certainly use it, if you understand what it means. But it may not be clear to readers who don't. – BoltClock Apr 26 '21 at 13:38
  • @JohnFajardo: However, if you were looking for "the last .class element" as most people usually are, *that's* not in the spec - it appears in the newer spec as :nth-last-child(1 of .class), which isn't widely supported yet. See also https://stackoverflow.com/questions/24657555/what-is-the-difference-between-first-child-and-first-of-type/24657721#24657721 and https://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-an-arbitrary-selector/5546296#5546296 – BoltClock Apr 26 '21 at 13:45
  • I wonder how the works then: http://jsfiddle.net/C23g6/3/ It does exactly that: selects the last item with class X, using last-of-type. –  Dec 12 '22 at 07:34
-5

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'})
NoBugs
  • 9,310
  • 13
  • 80
  • 146
  • 68
    jQuery is not CSS. – Jukka K. Korpela Nov 03 '12 at 18:02
  • 2
    @JukkaK.Korpela Well, but in real life it's a possible workaround that will fit your client's need. I like the solution. – Sliq Nov 03 '12 at 18:31
  • @Panique If you are looking for jQuery solutions, then you should **not** ask a question about a *completely* different technology (CSS in this case). – Basil Bourque Oct 04 '13 at 12:38
  • 3
    @BasilBourque I would kindly disagree here, as expanding the "horizon of technology" is totally cool here, as it solves a problem that cannot be solved with CSS. I didn't know that when I asked the question. Solving the problem is more important than using one specific changeable technology. – Sliq Oct 04 '13 at 13:35
  • 12
    Why can't people leave jQuery in their pockets? You can switch to just drawing your UI by poking memory addresses C64 style. It solves all these "specification" problems. He would like a last-of-class selector, it's not there yet. Looks like nobody has a conbination of selectors that can do it. Strange. Someone e-mail the CSS devs. – Lodewijk Jan 23 '14 at 00:41
  • 7
    If you REALLY want to solve this guy's problem, don't add jQuery as another problem! – Lodewijk Jan 23 '14 at 00:41
  • 1
    I would like a cat that flies. There is no such thing, but you might want to check out birds. NO NO NO #birdsarenotcats – Simon_Weaver Nov 10 '17 at 02:12