css first-of-type和last-of-type

Question

我在css中遇到first-of-type和last-of-type的问题。问题是last-of-type无效。我已经从codepen.io创建了这个DEMO。

.col {
   position:relative;
   width:100%;
   max-width:300px;
   margin-bottom:10px;
   margin-top:20px;
}

.you {
   float:left;
   width:100%;
   padding:20px;
   background-color:black;
   border-radius:5px;
}

.me {
   float:right;
   width:100%;
   padding:20px;
   background-color:black;
}



.msg:first-of-type .you  {
    border-top-right-radius: 12px;
}

.msg:last-of-type .you {
    border-bottom-right-radius: 12px;
}

.msg:first-of-type .me  {
    border-top-left-radius: 12px;
}

.msg:last-of-type .me {
    border-bottom-left-radius: 12px;
}

<div class="msg"><div class="col you">a</div></div>
<div class="msg"><div class="col you">a</div></div>
<div class="msg"><div class="col you">a</div></div>
<div class="msg"><div class="col you">a</div></div>
<div class="msg"><div class="col me">s</div></div>
<div class="msg"><div class="col me">s</div></div>
<div class="msg"><div class="col me">s</div></div>
<div class="msg"><div class="col me">s</div></div>
<div class="msg"><div class="col me">s</div></div>