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

Question

Por ejemplo, si tengo el siguiente código HTML:

<div class="someDiv"></div> 

y esto 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 ***/ 

} 

igual que la forma en lenguajes de script que tiene funciones genéricas que se utilizan a menudo escritas en la parte superior del guión 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.

Answer 1

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

Puede, sin embargo, los selectores de reutilización en múltiples conjuntos de reglas dentro de una hoja de estilo y uso varios selectores en un único conjunto de reglas (por separating them with a comma).

.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).

<div class="opacity radius"> 

Cualquiera de estos enfoques debería resolver su problema.

Es probablemente ayudaría si utilizó los nombres de clases que describen qué un elemento debe ser de estilo en lugar de cómo debe ser de estilo. Deje cómo en la hoja de estilo.

Answer 2

Apenas añada las clases a su html

<div class="someDiv radius opacity"></div> 

Answer 3

Puede no menos que esté utilizando algún tipo de CSS extendida como SASS. Sin embargo, es muy razonable aplicar esas dos clases adicionales al .someDiv.

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

Answer 4

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

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

Si usted tiene un javascript que ya procesa la página o puede encerrarlo en algún lugar de la escritura < > etiquetas. Si es así, ajuste lo anterior en la función de documento listo:

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

Hace poco me encontré con esto al actualizar un complemento 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 etiquetas.

Answer 5

Puede hacerlo fácilmente con SASS pre-processor utilizando @extend.

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

ohterwise, podría utilizar Javascript (jQuery), así:

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

Lo más fácil es, por supuesto, añadir múltiples clases de derecho en el HTML

<div class="opacity radius">