0

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?

Martin
  • 19,815
  • 6
  • 53
  • 104
Action Man
  • 35
  • 5
  • `+` - https://stackoverflow.com/q/1139763/3001761 – jonrsharpe Oct 07 '20 at 11:31
  • yes but with combination with not() is that somekind of - until something - meaning? – Action Man Oct 07 '20 at 11:33
  • 2
    `:not()` is a pseudo selector, meaning what it says on the tin - an element *not* matching the ``. In this case, an adjacent element that doesn't have the class of `chat-end`. – jonrsharpe Oct 07 '20 at 11:35
  • yeah it should to everything below that is not chat-end, yet the second question remain unsolved, how can i add infinite number of plusses, not only one below div.... until chat-end as i understant it aplied only to the next block that is not chat-end,but i need next and next and next if there is any – Action Man Oct 07 '20 at 11:37
  • 3
    Then maybe see https://stackoverflow.com/q/11813465/3001761 – jonrsharpe Oct 07 '20 at 12:02
  • Thank you, it is working that is the thing i was looking for. – Action Man Oct 07 '20 at 12:08

1 Answers1

3

While the comments below your question give you links to useful resources for the theory, here is the practical:

 .chat-segment-sent.chat-start + :not(.chat-end) .chat-message {

Means:

  • Select the element that contains both chat-segment-sent and chat-start classes
  • Which is then immediately followed by a peer (non parent non child) element (of/with any class/id) which is not marked as a chat-end class.
  • And then focus on the element with the chat-message class that is a child of the above peer element.

Resources:

Example:

.chat-segment-sent.chat-start + :not(.chat-end) .chat-message {
    color:green;
    font-weight: bold;
    border-bottom: 1px solid #000;
    padding-top: 0.5rem;
}
<div class='chat-segment-sent chat-start'>
<div class='chat-message'>
  Hello 1
  </div>
</div>
<div class='chat-segment-sent chat-start'>
<div class='chat-message'>
  Hello 2
  </div>
</div>
<div class='chat-segment-sent chat-start'>
<div class='chat-message'>
  Hello 3
  </div>
</div>
<div class='chat-segment-sent chat-start'>
<div class='chat-message'>
  Hello 4
  </div>
</div>
<div class='chat-segment-sent chat-start'>
<div class='chat-message'>
  Hello 5
  </div>
</div>
<div class='chat-segment-sent chat-start chat-end'>
   <div class='chat-message'>END</div>
</div>
<div class='chat-segment-sent chat-start'>
<div class='chat-message'>
  Hello bonus
  </div>
</div>
<div class='chat-somethingelse'>
<div class='chat-message'>
  this element is highlighed because it is a sibling which does not contain the chat-end class.  
  </div>
</div>
<div class='chat-somethingelse chat-end'>
<div class='chat-message'>
  this element is not highlighted because it is a sibling but it does contain the chat-end class.  
  </div>
  <div>
     this element is not highlighted because it is not a neighbouring sibling. 
  </div>
</div>
Martin
  • 19,815
  • 6
  • 53
  • 104
  • thank you, but this is only applied to one element after? or to the many elements that is not a 'chat-end' class? Another question would be, how to applied it to many blocks followed by a peer that are not 'chat-end' is that even possible? – Action Man Oct 07 '20 at 11:45
  • this site contain this code, you can test it here: https://www.gotbootstrap.com/themes/smartadmin/4.5.0/intel_analytics_dashboard.html - the chat with this code is clickable on the planet in the header on the right side of the page – Action Man Oct 07 '20 at 11:49
  • however another one question i have, but maybe on the end. – Action Man Oct 07 '20 at 11:51
  • i starting to understand it but is there a way to aplied to all the siblings not only to the next one? – Action Man Oct 07 '20 at 11:59
  • @ActionMan I have updated my answer. The CSS applies to all siblings that fit the criteria and that do not contain the `.chat-end` class – Martin Oct 07 '20 at 12:00
  • that is not true, only to the next one – Action Man Oct 07 '20 at 12:01
  • @ActionMan what you're looking for is something different. What you asked is how something works, if you want to ask about a specific solution to a specific criteria please ask a new question. Thanks – Martin Oct 07 '20 at 12:05
  • thank you, i am still learning stack overflow, ill do that – Action Man Oct 07 '20 at 12:09