Why class. Last: doesn't work?

Question

Why is this not working? http://jsfiddle.net/84C5W/1/

<style> p{ display : none; } p.visible:last-of-type { display : block; }​ </style> <div> <p class="visible">This should be hidden</p> <p class="visible">This should be displayed</p> <p class="">This should be hidden</p> </div> 

In fact, none of my <p> are visible. If I remove the link to ".visible" in the stylesheet, this will show the last <p> in the div, but that is not what I want.

Of course, I could always keep one “visible” always, but this is for the opening.js presentation, and I have no control over javascript. Only a stylesheet ...

Edit : Ok, so obvious. Class: last-of-type does not work. According to @Justus Romijn, the last-of-type class pseudo-class was intended only for selecting elements (which, in my opinion, is extremely limiting, and puts this particular pseudo-class in a more or less useless state).

In any case, I want to rephrase my question at this point: how can I select the last element inside a div with the class ".visible"? I do NOT want to use Javascript for this.

Answer 1

I did some testing, but the last-of-type selector only works with node selectors, not class names.

HTML:

 <p class="visible">First paragraph.</p> <p class="visible">Second paragraph.</p> <p>Third paragraph.</p> 

CSS

 p:last-of-type{ /* this will be applied in the third paragraph bacause the pseudo-selector is applied to nodes only */ font-weight: bold; } p.visible:last-of-type { /* this does not get applied, because you are using the pseudo-selector with a class. */ display: block; } 

From W3C :

The last-of-type pseudo-class is the element that is the last sibling of its type in the list of children of its parent element.

Since it should be a sibling, it probably ignores class names, because then you can mix it with other elements.

Why is there no sequential or parent selector? This can potentially block the blocking of many web pages by dynamically changing one class name per page. The widespread use of CSS3 selectors is already heavy in the browser and is not recommended.

Dave Hyatt, working on WebKit in 2008, mentioned some of the reasons why these implementations are avoided :

With parent selectors, it becomes extremely easy to accidentally fragment a document. People can and will abuse this selector. Supporting this gives people a whole rope to hang themselves with.

The sad truth about CSS3 selectors is that they really shouldn't be if you care about page performance. Decorating your markup with classes and identifiers and matching them while avoiding all the use of selectors, child and child selectors will actually make the page perform much better in all browsers.

Answer 2

The problem is that :last-of-type matches only the element selector. In your example, you are trying to match a class selector. That is why it does not work.

Example: http://dabblet.com/gist/4144885

Answer 3

Target the second last tag.

 .visible:nth-last-of-type(2) {} 

Answer 4

For future reference, this will be covered in CSS 4: https://www.w3.org/TR/selectors4/#the-nth-last-match-pseudo

Browser support at the time of writing does not exist: http://css4-selectors.com/selector/css4/structural-pseudo-class/

When this is ready, this should be the solution:

 p { display : none; } p.visible:nth-last-match(0) { display : block; } 

 <div> <p class="visible">This should be hidden</p> <p class="visible">This should be displayed</p> <p class="">This should be hidden</p> </div> 

Answer 5

so I circumvented a non-class problem - unfortunately this is a javascript solution:

 function lastOfType(className){ var allElemsOfType = $("."+className); if (!allElemsOfType || !allElemsOfType.length) return null; else return allElemsOfType[allElemsOfType.length - 1]; } 

Answer 6

in my case, I made a mistake.

 p.visible : last-of-type (x) p.visible:last-of-type (o) 

What I've done