CSS 只选中第一个和最后一个元素

今天遇到一个有点意思的样式设定，要求不管中间有多少内容，都保持第一个元素的左上角和最后一个元素的左下角有一个弧度，下面是效果图：

 

页面结构：

<ul class="grandparent">
    <li class="parent">
            <div class="son"></div>
    </li>
    <li class="parent">
            <div class="son"></div>
    </li>
    <li class="parent">
            <div class="son"></div>
    </li>
</ul>

 

CSS：

.grandparent li:first-of-type .son{
    border-top-left-radius: 15px;
}
.grandparent li:last-child .son{
   border-bottom-left-radius: 15px; 
}

由于背景和边框都是由.son 控制，所以css应用的是.son元素。其他情况以此类推就行。