estilo se sobrescribe

[primary]

Hola, tengo tres div alineadas estas capas se van ocultando quedando dos o incluso una, lo que quiero es que las capas que tienen un color de bondo se vean los border redondeadas pero solo la primera y la ultima, todo funciana bien pero cuando tengo solo una capa solo se me redondea la parte dereca pongo el ejemplo.

Código HTML:

<style>
.capa:first-child{
     border-radius:3px 0px 0px 3px;
}
.capa:last-child{
    border-radius:0px 3px 3px 0px;
}
</style>
 
 
<div class='capa'>primero</div>
<div class='capa'>segundo</div>
<div class='capa'>tercero</div>
 

cuando solo tengo un div solo se cumple el last-child, para solucionarlo lo que intento hacer es si solo tengo un div clear una nueva clase por ejemplo uno y dandole estilo pero tampoco funciona, quedando algo asi.

Código HTML:

<style>
.capa:first-child{
     border-radius:3px 0px 0px 3px;
}
.capa:last-child{
    border-radius:0px 3px 3px 0px;
}
.uno{
     border-radius:3px 0px 0px 3px;
}
</style>
 
<div class='capa uno'>segundo</div>
 

pero aunque esta regla este al final de las demas siemple se cumple solo de last-child, alguna idea como solucionar esto?
saludos

[mbm150]

Hola,

Código CSS:

.uno{
    border-radius: 3px !important;
}
 

Creo que así funciona.

Saludos.

[pzin]

Solucionarlo con !important es chapucero.

Es un problema de especificidad CSS. El selector .capa:last-child es más específico que .uno. Lo que tendrías que hacer es darle más especificidad a ese último selector. Si pones:

Código CSS:

.capa.uno {}
 

Tendrá la misma especificidad que el otro selector, pero al estar este como último prevalecerá y se aplicarán las reglas que contenga.