Unfortunately it does not work in this example:
https://jsfiddle.net/71xejb8o/1/

I think it may work in some scenarios, but not others, depending on the surrounding elements.

.accent-image-selector {
  padding-bottom: 1rem;
}

div.accent-image-selector:last-of-type {
  padding-bottom: 0rem;
}

.className a:first-of-type[href*=”string”]

I can’t get it to work with either first-of-type or last-of-type. Has anyone been able to get this working, or is using both selectors simply not supported?

@TylerH @Jan Hartmann Ok so you’re both right and wrong at the same time here lads. This is really weird behavior so bear with me.

It appears that using a class with :last-of-type results in something that I can only describe as *.class:first-of-class. So what exactly happens here? Well it does bind last-of-type to the html tag. Whether it be a div or a p or whatever. But that ‘last’ element must also have the css tag which is why Jan’s example doesn’t result in anything highlighted because whilst it does bind to the class as in this rule is applied using the class selector to any html elements the actual :last-of-type is bound to the html tags so you can’t have multiple classes using the same html tag and expact multiple :last-of-type highlights.

Now, this doesn’t happen to affect me because I’m writing web components which means that my element tag names are largely unique meaning that the class selector syntax is very helpful for filtering styling within lists and such.

@TylerH: You’re wrong:

https://jsfiddle.net/6cd83wb4/2/

You’re mistaken. :last-of-type works on class names and IDs just fine. The term “element” in the spec you quoted doesn’t refer to “tag name”, it refers to a general “element”. How you select that element is irrelevant. Example: https://jsfiddle.net/6cd83wb4/1/

.theList>p:nth-last-of-type(1) {
background: #ff0000;
}

where .theList is your container element

I want to have one picture in my header that will change and my readers have the possibility to read more if they are interested.

For example: I have several categories and I want a preview on my index page but only the first picture from the latest article in one of those categories..

hard to explain but several bloggers use that type of preview right now and I want that as well, but I don’t use wordpress so I have to find a way to solve that problem..

please help!

(inthefrow.com, lilypebbles.co.uk, viviannadoesmakeup.com, heyclaire.com – you get the picture..)

kind regards Kristina

.PFourTiles{
margin: 20px 13px 0px 0px;
}
.pseudo-primary{
.PFourTiles:last-of-type {
margin: 20px 0px 0px 0px;
}
}

In the spec it states:

The :last-of-type CSS pseudo-class represents the last sibling with the given element name in the list of children of its parent element.

So doing something like this won’t work:

.foo:last-of-type {color: red;}

But doing this will work:

p:last-of-type {color:red;}

A type should be what is specified before the :last-of-type, so if I have “.January” as the “type”, the “.January:last-of-type” should hit the last occurrence elements with the class “.January“, which it does not (using Chrome 39.0.2171.95 (64-bit), OS X).