Как выбрать последний элемент?

Question

Как выбрать все последние сообщения после каждого «Привет» в css?

Не используется JavaScript.

.my {
  text-align: right;
}

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

<p class="me">Hello</p>

<p class="my">message</p>
<p class="my">message</p>
<p class="my">message</p>
<p class="my">last message</p>

<p class="me">Hello</p>
<p class="me">Hello</p>

<p class="my">message</p>
<p class="my">message</p>
<p class="my">last message</p>

Это должно быть: изображение

Answer 1

Я думаю, у меня есть решение для вас, вам нужно отменить свои сообщения, тогда может произойти волшебство css:

.chat-messages {
  display: flex;
  flex-direction: column-reverse;
}

.my {
  text-align: right;
}

.my:first-of-type, .me + .my {
  color: red;
}

<div class="chat-messages">
  <p class="my">last message</p>
  <p class="my">message</p>
  <p class="my">message</p>
  <p class="me">Hello</p>
  <p class="me">Hello</p>
  <p class="my">last message</p>
  <p class="my">message</p>
  <p class="my">message</p>
  <p class="my">message</p>
  <p class="me">Hello</p>
</div>

Answer 2

Вам либо нужно обернуть каждую группу .my сообщений в контейнере, чтобы использовать :last-of-type, либо применить определенный класс модификаторов к последнему сообщению:

.my {
  text-align: right;
}

.my.last {
  color: red;
}

<p class="me">Hello</p>

<p class="my">message</p>
<p class="my">message</p>
<p class="my">message</p>
<p class="my last">last message</p>

<p class="me">Hello</p>
<p class="me">Hello</p>

<p class="my">message</p>
<p class="my">message</p>
<p class="my last">last message</p>