.ClassName:last-of-type завершается с ошибкой, если за ним следует какой-либо родственный тип [дубликат] ⇐ CSS

[Anonymous]

Я пытаюсь стилизовать последний элемент с определенным именем класса в коллекции дочерних элементов, в частности, последний элемент div.Bottom. И последний ребенок, и последний тип работают отлично, пока что-нибудь еще (любой тип элемента) не следует за целевым элементом, и в этом случае совпадение не удается.
Я видел много сообщений о SO, а также учебные пособия, в которых div:last-of-type работает во всех случаях, но здесь мне нужно ссылаться на имена классов, а не на тип элемента. После последней попытки через CoPilot мне сообщили, что мой подход правильный (хотя, очевидно, это не так!).
Пожалуйста, посмотрите пример (ссылка на CodePen):
.SCSS

Код: Выделить всё

.Container {
background-color: #ddd;
padding: 0.25rem;
margin: 2rem;

> div {
height: 1rem;
border: 1px solid #999;
margin: 0.5rem;
padding: 0.25rem;
background-color: #fff;
}

.Bottom {
border-color: red;
}

.Bottom:last-of-type {
border-style: dashed;
}

.Bottom:last-child {
background-color: #aca;
}

}

HTML

Код: Выделить всё

.Bottom
.Middle
.Bottom (border and background-color applied)


.Bottom
.Middle
[b].Bottom no longer matches[/b]
Anything other than .Bottom

Это дает следующий результат:


Почему сопоставление завершается неудачно, если что-то еще следует за последним классом .Bottom? Даже если я заменю div на p, совпадение все равно не удастся.

Подробнее здесь: https://stackoverflow.com/questions/797 ... follows-it