Css last-child doesn't work when adding divs of different classes

Question

I have HTML that looks like this:

<div class="SomeContainer"> <div class="MyClass"></div> <div class="MyClass"></div> <div class="MyClass"></div> <div class="MyOtherClass"></div> </div> 

And I use the following CSS

 .MyClass{...} .MyClass:last-child{box-shadow:0px 5px 10px black;} 

I mistakenly assumed that last-child works with the last child of a particular class, but actually works with the last-descendant of a container if it has the same class.

Is there any convenient way? I know that I can add a wrapper around the MyClass div and add CSS for the shadow to the wrapper, but I was wondering if there is a better way to do this.

Thanks.

Answer 1

Since you've already tried using the CSS3 selector, then this is the right pseudo-class to use

 .MyClass:last-of-type 

According to the CSS3 specification (at least as far as I understand) this should work, but it seems not. At least not in the latest versions of Chrome (v23) and Firefox (v17).

WARNING: The top information does not work and can be misleading that there is a pure CSS solution for this problem ... Because with CSS3 it is not there. CSS4, on the other hand, will have an additional pseudo-class :nth-last-match(n) , which is likely to cover this exact scenario. But it's too early to say when not all CSS3 selectors have been implemented by browsers.

Additional study

Here's a JSFiddle that shows how this pseudo-selector selector works:

• get all elements that satisfy the CSS selector (no pseudo)
• get different types of HTML elements (tags)
• select all sibling elements of the same type (tag) for each group of types (tags)
• Reduce the group of types (tags) to the last element in the group
• Does this remaining element (of each group) remain a selector (without a pseudo)?
• If true , then apply the style, otherwise <

This means (as my example shows) that several sibling elements can satisfy this selector if they are of a different type.

This seems to work in Chrome and Firefox. And if we read the specification carefully, it will say

The class pseudo-class :last-of-type represents an element that is the last affinity of its type in the list of children of its parent element.

If he said that this is the last brother who satisfied the selector, then my upper solution will work. So let's check my steps.

Run the steps using HTML

• gets the first 3 items
• only one type: div
• four elements (including the last)
• reduce to the last
• satisfies? No
• don't set style

Another pair of examples in my violin

Just to test this pseudo-class selector behavior, I added two additional examples. Here's the HTML:

 <!-- First --> <div class="SomeContainer"> <div class="MyClass">Content</div> <div class="MyClass">Content</div> <p class="MyClass">Content</p> <p class="MyClass">Content</p> </div> <!-- Second --> <div class="SomeContainer"> <div class="MyClass">Content</div> <div class="MyClass">Content</div> <div class="MyClass">Content</div> <p class="MyOtherClass">Content</p> </div> 

The first of the two elements satisfies the selector (last div and last p ).
In the second one element satisfies the selector (last div )

Result

By providing the HTML that you provided, and assuming there could be an arbitrary number of elements with .MyClass , there is no way to write a common selector in CSS3 that would actually target the last element with a specific CSS class.

The best way is to add an extra class to the elements that represent the last with a particular class, and write a selector to target it.

Answer 2

It seems that the latter type will only help you if you make your last element not the same as the rest, classnames don't seem to be relavant here. In this example, two red squares are displayed correctly, one green, one blue.

 .SomeContainer > div, .SomeContainer > span { width: 20px; height: 20px; background: red} .SomeContainer > div:last-of-type {background: green} .SomeContainer > span:last-child {box-shadow:0px 5px 10px black; background: blue; display: block} 

 <div class="SomeContainer"> <div class="MyClass"></div> <div class="MyClass"></div> <div class="MyClass"></div> <span class="MyOtherClass"></span> </div>