¿Es posible hacer referencia a una regla de CSS dentro de otra?

Por ejemplo, si tengo el siguiente HTML:

y este CSS:

 .opacity { filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; } .radius { border-top-left-radius: 15px; border-top-right-radius: 5px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; } .someDiv { background: #000; height: 50px; width: 200px; /*** How can I reference the opacity and radius classes here so this div has those generic rules applied to it as well ***/ } 

Al igual que en los lenguajes de scripting, tiene funciones genéricas que se utilizan a menudo escritas en la parte superior del script y cada vez que necesita usar esa función simplemente llama a la función en lugar de repetir todo el código cada vez.

No, no puede hacer referencia a un conjunto de reglas de otro.

Sin embargo, puede reutilizar selectores en múltiples conjuntos de reglas dentro de una hoja de estilo y usar múltiples selectores en un solo conjunto de reglas ( separándolos con una coma ).

 .opacity, .someDiv { filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; } .radius, .someDiv { border-top-left-radius: 15px; border-top-right-radius: 5px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; } 

También puede aplicar múltiples clases a un solo elemento HTML (el atributo de clase toma una lista separada por espacios).

 

Cualquiera de esos enfoques debería resolver su problema.

Probablemente sería útil utilizar nombres de clase que describan por qué se debe diseñar un elemento en lugar de cómo se debe diseñar. Deje el cómo en la hoja de estilo.

No puede hacerlo a menos que esté utilizando algún tipo de CSS extendido como SASS . Sin embargo, es muy razonable aplicar esas dos clases adicionales a .someDiv .

Si .someDiv es único, también elegiría darle una identificación y hacer referencia a ella en css usando la identificación.

Si está dispuesto y es capaz de emplear un poco de jquery, simplemente puede hacer esto:

 $('.someDiv').css([".radius", ".opacity"]); 

Si tiene un javascript que ya procesa la página o puede encerrarlo en algún lugar de las tags

 $(document).ready( function() { $('.someDiv').css([".radius", ".opacity"]); } 

Recientemente me encontré con esto mientras actualizaba un plugin de WordPress. Los han cambiado y usaron muchas directivas "! Important" en todo el css. Tuve que usar jquery para forzar mis estilos debido a la decisión genial de declarar! Importante en varias tags.

Puede hacerlo fácilmente con el preprocesador SASS utilizando @extend.

 someDiv { @extend .opacity; @extend .radius; } 

O bien, puedes usar JavaScript (jQuery) también:

 $('someDiv').addClass('opacity radius') 

Lo más fácil es, por supuesto, agregar múltiples clases directamente en el HTML

 

Solo agrega las clases a tu html