csscss-selectors

How to set borders between children from parent in CSS?

For setting a border line between elements, I use border on one side for each child, except the last one. For example

<div class="parent">
   <div>First</div>
   <div>Second</div>
   <div>Third</div>
   <div>Fourth</div>
</div>

with CSS

.parent div{
    display:block;
    padding:5px;
    border-bottom:dashed 1px #000}
.parent div:last-child{
    border-bottom:dashed 0 #000
}

Is there a way to set the border between children from parent's CSS style? without using last-child. In other words, in one single statement from parent rule.

Solution

  • No, the border is a property of the child element, and thus can only be specified on them. You can use a single rule for this, but it requires advanced CSS3 selector support:

    .parent > div:not(:last-child){
    border-bottom: dashed 1px #000;
}