Establezca el mismo valor para varias propiedades (CSS)

Question

Esto parece una pregunta tan estúpida pero no puedo encontrar la respuesta en ningún lado.

¿Hay una manera de establecer múltiples propiedades CSS a un valor

border-left, border-right: 1px solid #E2E2E2; 

la forma en que se puede hacer con selectores?

.wrapper, .maindiv { ... } 

Answer 1

Nope. Sin embargo, por su ejemplo, usted puede hacer esto:

border: solid #E2E2E2; 
border-width: 0 1px; 

Los atributos donde puede haber valores separados para arriba, derecha, abajo y de izquierda (por ejemplo, frontera- *, margen, relleno) puede ser combinado en general un solo atributo.

Answer 2

No es posible, a menos que hagas:

border: 1px solid #E2E2E2; 

..which establece el mismo borde en todos los lados. Si desea controlarlos individualmente, debe escribirlos como declaraciones separadas.

Tenga en cuenta que, en algunos casos, puede establecer varios valores para un atributo, pero no puede tener múltiples atributos con un valor en una declaración.

Answer 3

No es posible con CSS simple, pero puede echar un vistazo a scss o less que pueden tener soluciones para su problema.

Una solución con CSS sin formato es el siguiente:

border: 1px solid #E2E2E2; 
border-width: 0px 1px; 

Answer 4

Si los atributos están relacionados, como es el caso de border-left y border-right, por lo general es un atributo común que le permite establecer ellos:

border: 1px solid #e2e2e2; 

Por otro lado, hay algunas bibliotecas como Less CSS que extienden CSS para que pueda agrupar propiedades y atributos relacionados fácilmente.

Answer 5

CSS no permite dicho control. Una solución es usar una regla más grande, luego restringirla:

border: 1px solid #E2E2E2; 
border-top: 0; 
border-bottom: 0; 

Pero termina con más código. Otra solución es utilizar CSS "compilador", como SASS o Less

Answer 6

Si está utilizando Sass, intente esto:

@mixin border($properties , $value){ 
    @each $property in $properties{ 
     border-#{$property}: $value; 
    } 
} 

selector{ 
    @include border(left right, 1px solid #E2E2E2); 
}