css last-child не работает при добавлении div разных классов

Поскольку вы уже пробовали использовать селекторы CSS3, то это правильный псевдокласс для использования

.MyClass:last-of-type

Согласно спецификации CSS3 (по крайней мере, насколько я понимаю) это должно работать, но кажется, что это не так. По крайней мере, не в последних версиях браузеров Chrome (v23) и Firefox (v17).

ВНИМАНИЕ: приведенная выше информация не работает и может вводить в заблуждение, что существует чистое решение этой проблемы с помощью CSS... Потому что в CSS3 его нет. CSS4, с другой стороны, будет иметь дополнительный псевдокласс :nth-last-match(n), который, скорее всего, покроет именно этот сценарий. Но пока рано говорить о том, что не все селекторы CSS3 реализованы в браузерах.

Дополнительное расследование

Вот JSFiddle, который показывает, как на самом деле работает этот селектор псевдокласса:

1. получить все элементы, удовлетворяющие селектору CSS (без псевдо)
2. получить их различные типы элементов HTML (теги)
3. выбрать все родственные элементы одного типа (тега) для каждой группы типов (тегов)
4. Сократите каждую группу типов (тегов) до последнего элемента в группе
5. Удовлетворяет ли этот оставшийся элемент (каждой группы) селектору (без псевдо)?
6. Если true, тогда применяйте стиль, в противном случае не применяйте

Это означает (как показывает мой пример), что несколько родственных элементов могут удовлетворять этому селектору, если они относятся к разным типам.

Кажется, это работает одинаково в Chrome и Firefox. И если мы внимательно прочитаем спецификацию, там действительно сказано

Псевдокласс :last-of-type представляет элемент, который является последним родственным элементом своего типа в списке дочерних элементов родительского элемента.

Если бы он сказал, что это последний брат, который удовлетворил селектор, то мое верхнее решение сработало бы. Итак, давайте проверим мои шаги.

Выполните шаги, используя ваш HTML

1. получает первые 3 элемента
2. только один тип: div
3. четыре элемента (включая последний)
4. сократить до последнего
5. удовлетворяет? Нет
6. не задавать стиль

Еще пара примеров в моей скрипке

Чтобы проверить поведение селектора псевдокласса, я добавил два дополнительных примера. Вот 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>

В первом два элемента удовлетворяют селектору (последний div и последний p).
Во втором один элемент удовлетворяет селектору (последний div)

Исход

Имея предоставленный вами HTML и предполагая, что может быть произвольное количество элементов с .MyClass, невозможно написать общий селектор в CSS3, который фактически нацеливался бы на последний элемент с определенным классом CSS.

Лучший способ — добавить дополнительный класс к элементам, которые представляют последний элемент с определенным классом, и написать селектор для этого.

Похоже, что последний тип поможет вам, только если вы сделаете свой последний элемент не таким, как остальные, имена классов здесь не имеют значения. В этом примере правильно показаны два красных квадрата, один зеленый, один синий.

.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>