css sibling selector div in div

Question

I am trying to make a facebook style chat bubble using sibling selector. I have tryed this DEMO But the siblings doesn't worked like this DEMO . The second demo answer from stackoverflow user by Serg Chernata .

What i am missing anyone can help me please ? Or is there anyway to do it like facebook chat bubble ?

*{
  box-sizing:border-box;
  position:relative; 
}
.container {
  width:100%;
  max-width:400px;
  margin:0px auto;
  padding:15px;
  background-color:#fafafa;
  border-radius:3px;
  margin-top:50px;
  border:1px solid #f5f5f5;
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}
.conversations {
  display:inline-block;
  width:100%;
  padding:50px 0px;
}
.box {
  width:100%;
  padding:1px 0px;
  display:inline-block; 
  font-size:14px;
  font-weight:400;
}
.you {
  max-width:60%;
  border-radius:30px;
  background-color:#d8dbdf;
  padding:15px;
  float:left;  
}
.me {
  max-width:60%;
  border-radius:30px;
  background-color:#0084ff;
  padding:15px;
  float:right;
  color:#ffffff; 
  font-weight:300;
}

.box  .you + .me{
  border-bottom-right-radius: 5px;
}

.box .me + .me{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.box  .me:last-of-type {
  border-bottom-right-radius: 30px;
}

<div class="container">
  <div class="conversations">
    <div class="box"><div class="you">1 Message</div></div>
    <div class="box"><div class="me">2 Message</div></div>
    <div class="box"><div class="me">3 Message</div></div>
    <div class="box"><div class="you">4 Message</div></div>
    <div class="box"><div class="you">5 Message</div></div>
    <div class="box"><div class="me">6 Message</div></div>
    <div class="box"><div class="me">6 Message</div></div>
  </div>
</div>

Which demo do you want to make it like, the first demo or the second? — Vappor Washmade, Mar 20 '19 at 08:13
@VapporWashmade I am trying first demo, i want to make it like second demo. — AlwaysStudent, Mar 20 '19 at 08:14

Andy Hoffman · Answer 1 · 2019-03-20T08:25:25.057

Sibling selectors must work on the same level of the DOM tree. You were nesting each me and you element inside a parent box, meaning that those sibling selector rules would never work. I moved the you and me classes to share the box class (originally the parent div).

To add a bit of spacing between you and me groupings, I added the following:

.you + .me,
.me + .you {
  margin-top: 1em;
}

For accessibility and general HTML semantics, I think the structure would be best suited as a ul, since this is a list of chat messages. I did not alter your HTML, but you should probably make that adjustment eventually.

*{
  box-sizing:border-box;
  position:relative; 
}
.container {
  width:100%;
  max-width:400px;
  margin:0px auto;
  padding:15px;
  background-color:#fafafa;
  border-radius:3px;
  margin-top:50px;
  border:1px solid #f5f5f5;
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}
.conversations {
  display:inline-block;
  width:100%;
  padding:50px 0px;
}
.box {
  width:100%;
  padding:1px 0px;
  display:inline-block; 
  font-size:14px;
  font-weight:400;
}
.you {
  max-width:60%;
  border-radius:30px;
  background-color:#d8dbdf;
  padding:15px;
  float:left;  
}
.me {
  max-width:60%;
  border-radius:30px;
  background-color:#0084ff;
  padding:15px;
  float:right;
  color:#ffffff; 
  font-weight:300;
}

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

.you + .me,
.me + .you{
  margin-top: 1em;
}

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

.box.me:last-of-type {
  border-bottom-right-radius: 30px;
}

<div class="container">
  <div class="conversations">
    <div class="box you">1 Message</div>
    <div class="box me">2 Message</div>
    <div class="box me">3 Message</div>
    <div class="box you">4 Message</div>
    <div class="box you">5 Message</div>
    <div class="box me">6 Message</div>
    <div class="box me">6 Message</div>
  </div>
</div>

score 1 · Answer 2 · answered Mar 20 '19 at 09:12

You can control the child element by using parent most of the cases. I have reversed box and me,you classes. I hope this solution will be helpful.

.me,
.you {
    display: inline-block;
    width: 100%;
}
.me .box {
    float: right;
}
.you .box {
    float: left;
    background-color: #d8dbdf;
    color: #444;
}
.box {
    max-width: 60%;
    border-radius: 30px;
    background-color: #0084ff;
    padding: 15px;
    color: #ffffff;
    font-weight: 300;
}
.you + .me .box {
    border-bottom-right-radius: 5px;
}
.me + .me .box {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.me:last-of-type .box {
    border-bottom-right-radius: 30px;
}

<div class="container">
    <div class="conversations">
        <div class="you">
            <div class="box">1 Message</div>
        </div>
        <div class="me">
            <div class="box">2 Message</div>
        </div>
        <div class="me">
            <div class="box">3 Message</div>
        </div>
        <div class="you">
            <div class="box">4 Message</div>
        </div>
        <div class="you">
            <div class="box">5 Message</div>
        </div>
        <div class="me">
            <div class="box">6 Message</div>
        </div>
        <div class="me">
            <div class="box">7 Message</div>
        </div>
        <div class="me">
            <div class="box">8 Message</div>
        </div>
        <div class="me">
            <div class="box">9 Message</div>
        </div>
    </div>
</div>

score 0 · Answer 3 · answered Mar 20 '19 at 08:15

In your example the .box-container is the problem. You can not use the silbing-selector or the :last-of-type in this case. The reason is that .me-container is not the silbing of the other .me-container. It would be the cousin. Unfortunately there is no cousin selector. ;)

score 0 · Answer 4 · answered Mar 20 '19 at 08:28

0

Like the other said the .box container was the problem. Just edit your selector to this

.box:last-of-type > .me {
   border-bottom-right-radius: 30px;
}

answered Mar 20 '19 at 08:28

Francis G

1,040
1
7
21

css sibling selector div in div

4 Answers4