there I am bothered by what is this +
and :not()
selector. This is not my code, but I want to understand it. What does this mean?
.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-end) .chat-message {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
.chat-segment-sent.chat-end .chat-message {
border-top-right-radius: 3px;
}
.chat-segment-sent .chat-message {
background: #1dc9b7;
color: white;
text-align: left;
}
The arrangement of the blocks looks like this:
chat-segment chat-segment-get/send chat-start
chat-message /
/
chat-segment chat-segment-get/send
chat-message /
/
chat-segment chat-segment-get/send chat-end
chat-message /
/
The issue is that I need to repair that code. When I add another middle sector, border-radius does not apply to this new block.
So there is my second question how can I start to think about repairing that code, for proper behaviour?