：first-child和：last-child同时

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;
}

Answer 2

Use :only-child :

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

Update: Yogu is right. I forgot to mention. This should come after your statements.