: первый ребенок и: последний ребенок одновременно

Question

Это может быть очень легко, так как у меня такое чувство, что у меня отсутствует базовая точка здесь.

Ситуация:

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

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

работает очень хорошо, до тех пор, пока только один ребенок. В этом случае вторая декларация перезапишет первую, и желаемый эффект не будет достигнут.

Какой самый короткий и элегантный способ решить эту проблему?

Answer 1

Split это:

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

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

Или написать дополнительное правило:

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

Answer 2

Использование :only-child:

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

Update: Йогу правильно. Я забыл упомянуть. Это должно произойти после ваших заявлений.