elementos múltiples con css similar

Tengo múltiples elementos html. Usan estilos de CSS muy similares. La única diferencia es el estilo de borde (un elemento tiene todo excepto el borde izquierdo, otro casi derecho, etc.).elementos múltiples con css similar

Hasta ahora, solía crear varios estilos diferentes que tienen una sola línea de código diferente. Eso ensombreció seriamente mi archivo css. ¿Hay alguna solución mejor a mi problema? ¿Hay algún tipo de herencia que pueda usar?

Fuente

2011-01-03 johan

Hay muchas maneras de lograr esto.

Use varios selectores:

selector #1, selector #2, selector #3 { 
    /* common styles */ 
} 
selector #1 { border-left: none; } 
selector #2 { border-right: none; } 
selector #3 { border-top: none; }

Dependiendo de la estructura del documento se puede intentar algo como esto:

<ul> 
    <li>Element #1</li> 
    <li>Element #2</li> 
    <li>Element #3</li> 
</ul> 


ul li { 
    /* common styles */ 
} 
ul li:first-child { border-left: none; } 
ul li:last-child { border-right: none; }

Use varias clases:

<ul> 
    <li class="border no-left">Element #1</li> 
    <li class="border">Element #2</li> 
    <li class="border no-right">Element #3</li> 
</ul> 


.border { 
    /* common styles */ 
} 
.border.no-left { border-left: none; } 
.border.no-right { border-right: none; }

Fuente

2011-01-03 01:54:18 Crozin

¡Bonito, gracias! Pero qué sucede cuando tengo algo como esto: input [type = button]: hover similar a algo como esto: input [type = button] ??? – johan

@johan Ese es el primer caso en la respuesta anterior: use comas para separar múltiples selectores arbitrariamente complejos y asígnelos al mismo estilo. Tenga en cuenta que creo que [esto solo es apropiado cuando hay una relación semántica] (http://phrogz.net/CSS/HowToDevelopWithCSS.html#groupstyles) entre los elementos seleccionados. _ (O si está ** desesperado ** para guardar unos pocos bytes.) _ – Phrogz

': el pseudoclases 'hover' se puede interpretar como" ** estilos ** adicionales para el elemento indicado ", entonces' entrada [tipo = botón] { common-styles} entrada [type = button]: hover {specific-styles} ' – Crozin

Se puede declarar un elemento con varias clases

<div class="general-class left-border-class"></div> 
<div class="general-class top-border-class"></div> 
...

Fuente

2011-01-03 01:48:42

CSS

.border { 
    border: solid #555 2px; 
    width: 100px; 
    height: 100px; 
    } 
    .border.left { 
     border-width: 0 2px 0 0; 
     } 
    .border.right { 
     border-width: 0 0 0 2px; 
     }

HTML

<div class="border left"></div> 
<div class="border"></div> 
<div class="border right"></div>

Fuente

2011-01-03 01:52:26

En este particular escenario - donde tiene elementos con diferentes estilos de borde - que puede usar la pseudoclase :first-child.

Demostración en directo:http://jsfiddle.net/7WJe9/1/

Fuente

2011-01-03 01:53:24

elementos múltiples con css similar

Respuesta

Cuestiones relacionadas