:first-child and :last-child simultaneously

Question

This may be very easy as i have a feeling i'm missing a basic point here.

Situation:

.singleOrder:first-child {
    border-radius: 5px 0 0 0;
}

.singleOrder:last-child {
    border-radius: 0 5px 0 0;
}

Works really well until there is only one child. In that case the second declaration will overwrite the first one and the desired effect will not be achieved.

What is the most short and elegant way to solve this?

Answer 1

Split it:

.singleOrder:first-child {
    border-top-left-radius: 5px;
}

.singleOrder:last-child {
    border-bottom-left-radius: 5px;
}

Or write an extra rule:

.singleOrder:first-child:last-child {
    border-radius: 5px 5px 0 0;
}