Sass selector to highlight last nested sibling element

Viewed 37

I have troubles to select the following items:

...
    <app-chat-message>
       <app-chat-message-simple>
          <div class="chat-message left">...</div>
       </app-chat-message-simple>
    </app-chat-message>
<app-chat-message>
       <app-chat-message-simple>
          <div class="chat-message left">...</div>
       </app-chat-message-simple>
    </app-chat-message>
<app-chat-message>
       <app-chat-message-simple>
          <div class="chat-message left">...</div>         <== every last "left" element
       </app-chat-message-simple>
    </app-chat-message>
<app-chat-message>
       <app-chat-message-simple>
          <div class="chat-message right">...</div>
       </app-chat-message-simple>
    </app-chat-message>
<app-chat-message>
       <app-chat-message-simple>
          <div class="chat-message right">...</div>      <== every last "right" element
       </app-chat-message-simple>
    </app-chat-message>
<app-chat-message>
       <app-chat-message-simple>
          <div class="chat-message left">...</div>       <== every single "left" element
       </app-chat-message-simple>
    </app-chat-message>
<app-chat-message>
       <app-chat-message-simple>
          <div class="chat-message right">...</div>     <== every single "right" element
       </app-chat-message-simple>
    </app-chat-message>
...

In short: I need every div element within class "left" or "right" that ends with the other ones. I need this to formate a chat conversation list like on the screenshot bellow: Chatroom Screenshot

Do anyone have an idea?

0 Answers
Related