Is there a way to select last sibling until some tag?

Question

I need the last sibling to have different styles than the previous, but without it having different markup!

It is like:

div#one .chat-segment .chat-get .chat-start - border-radius left !down! rounded 3 px rest 15px
div#two .chat-segment .chat-get - border-radius left !down! and !top! rounded 3 px rest 15px - 1 sibling
div#three .chat-segment .chat-get - border-radius left !down! and !top! rounded 3 px rest 15px 2 sibling
div#four .chat-segment .chat-get - border-radius left !top! rounded 3 px rest 15px - last sibling
div#five .chat-segment .chat-sent .chat-start - border-radius left !down! rounded 3 px rest 15px

So is there a way to somehow in this case edit the selectors in the tagged place to make that effect?

Visual Representation of proper outcome

What i have so far: (left msgs)

.chat-segment-get {
    text-align: left;
    position: relative;
    margin: 0 2rem 0.5rem 0; }
  .chat-segment-get.chat-start .chat-message {
    border-bottom-left-radius: 3px; }
  .chat-segment-get.chat-start ~ :not(.chat-start) .chat-message {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px; }
  .--the one that is need to be last sibling-- {
    border-top-left-radius: 3px; }
  .chat-segment-get .chat-message {
    background: #f1f0f0;
    color: rgba(0, 0, 0, 0.8);
    text-align: left; }

the same with sent (right msgs)

  .chat-segment-sent {
    text-align: right;
    position: relative;
    margin: 0 0 .5rem 3rem; }
  .chat-segment-sent.chat-start .chat-message {
    border-bottom-right-radius: 3px; }
  .chat-segment-sent.chat-start ~ :not(.chat-start) .chat-message {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px; }
  .--that one that need to be the last sibling {
    border-top-right-radius: 3px; }
  .chat-segment-sent .chat-message {
    background: #1dc9b7;
    color: white;
    text-align: left; }

Here's the code for the segment. If this is first msg from the segment from this user, the chat-start is given to the first msg of the left or right.

'<!-- start .chat-segment -->\n' +
'<div id="message_'+ msg['id'] +'" class="chat-segment chat-segment-sent">\n' +
' <div class="chat-message tooltip-appending" data-toggle="tooltip" data-placement="auto" title="" data-original-title="' + msg['createdAt'] + '" data-html="true">\n' +
'  <p>\n' +
    msg['content'] +
'  </p>\n' +
' </div>\n' +
'</div>\n' +
'<!--  end .chat-segment -->' +

Are you looking for the last in a series of elements with the same class name? — isherwood, Oct 07 '20 at 14:14
Also, I'm not sure what the code is that you've shown us, but it's not CSS and HTML. Please format them as such or tag for your backend technology. — isherwood, Oct 07 '20 at 14:18
In other words, show the rendered code that the browser sees. — isherwood, Oct 07 '20 at 14:18
Not exactly a direct duplicate but it's close enough; most importantly the question you are wanting to ask (and its answer) is there. — TylerH, Oct 07 '20 at 14:19

score 0 · Answer 1 · answered Oct 07 '20 at 14:10

0

I think what you are looking for is the last-child selector. You can also use last-of-type if, for example you want to get the last element based on the type of html-entity.

ul li:last-child {
  color: red;
}

div p:last-of-type {
  color: red;
}

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<hr>
<div>
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
<span>Don't use this</span>
</div>

answered Oct 07 '20 at 14:10

MincedMeatMole

469
6
14

I'm fairly sure there's more to the question than last-child. – isherwood Oct 07 '20 at 14:12
Based on the image posted I would say last-child should work. It looked like he was just asking for a css-selector for the last chat message in a segment. – MincedMeatMole Oct 07 '20 at 14:16

score 0 · Answer 2 · edited Oct 07 '20 at 19:34

I cant understand your html above. But yes there is a way. Just write :last-child with child-div like i did. If you have multiple div and their parent is same then you can do it.

<div class="main-div">
  <div class="child-div"></div>
  <div class="child-div"></div>
  <div class="child-div"></div>
  <div class="child-div"></div>
  <div class="child-div"></div>
</div>

.child-div:last-child {

}

Is there a way to select last sibling until some tag?

Visual Representation of proper outcome

2 Answers2