How can I select the last item in a group of the same element

Question

So. I'm making a chat messaging system's UI. How can I select the last item in a group of "messages" with the same class using CSS (Probably impossible) or JQuery ( maybe possible )?

I want to select the elements circled in red.

Code:

#chatmsgs {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: scroll;
  width: 100%;
  height: 100%;
}
ul li {
  display:inline-block;
  clear: both;
  padding:8px;
  padding-top:5px;
  padding-bottom:5px;
  border-radius: 30px;
  margin-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
}

.msg-them{
  background:#eee;
  float: left;
}

.msg-you{
  float: right;
  background: #0084ff;
  color: #fff;
}

.msg-them + .msg-you{
  border-bottom-right-radius: 5px;
}

.msg-you + .msg-you{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.msg-you:last-of-type {
  border-bottom-right-radius: 30px;
}

<ul id="chatmsgs"><li class="msg-them">b has joined</li><li class="msg-you">a</li><li class="msg-you">a</li><li class="msg-you">a</li><li class="msg-you">a</li><li class="msg-you">a</li><li class="msg-them">b: b</li><li class="msg-them">b: b</li><li class="msg-them">b: b</li><li class="msg-them">b: b</li><li class="msg-them">b: b</li><li class="msg-you">a</li><li class="msg-you">a</li><li class="msg-you">a</li></ul>

Not possible with CSS as all your elements have a single parent. — Paulie_D, Oct 28 '21 at 18:14
You will have to do some more research on selecting the last of class in JQ. — Paulie_D, Oct 28 '21 at 18:15
Something like - https://stackoverflow.com/questions/2310270/jquery-find-closest-previous-sibling-with-class — Paulie_D, Oct 28 '21 at 18:17

score 0 · Accepted Answer · answered Oct 28 '21 at 18:41

I found out how using JQuery.

$(".msg-them").prev(".msg-you").each((index,value) => $(value).css("border-bottom-right-radius","30px"));

It finds each ".msg-them" and if the previous item is a ".msg-you" for each ".msg-you" that is before a ".msg-them" apply the css I need to it.

How can I select the last item in a group of the same element

1 Answers1