¿Llamar a una clase CSS dentro de otra clase?

¿Es posible tener otra referencia de clase CSS? En lugar de volver a escribir todo el código CSS de nuevo?¿Llamar a una clase CSS dentro de otra clase?

Por ejemplo, tengo esto:

.btn{ 
    /* Whatever btn related styles I have */ 
} 

.btn:hover{ 
    box-shadow:0 0 4px black; 
} 

.btn:active{ 
    /* This is where I want to reference the '.red' class */ 
} 

.red{ 
    /* There is a LOT of CSS code here for cross browser gradients */ 
}

Lo que pasa es que ya estoy utilizando la clase .red al igual que en ciertos lugares, y también me gustaría aplicar el mismo estilo de degradado para el estado 'activo' de todos los elementos con la clase .btn ...

Si puede ayudar a resolverlo (no es necesario que lo haya pedido) esto, lo agradecería muchísimo ...

Fuente

2011-06-13 Abhishek

No se puede hacer una referencia (uno de los fallos principales de CSS), pero puede hacer esto:

.btn:active, .red { 
    /* Block A: Most (or all) of what used to just be in .red below */ 
} 

.btn:active { 
    /* Block B: Stuff *just* for .btn:active, if any */ 
} 

.red { 
    /* Block C: Stuff *just* for .red, if any */ 
}

La coma significa que las definiciones en el cuerpo del bloque A se aplican por separado a cada de esos selectores, y por lo que se aplican a cualquier elemento ".btn" que son ': activo', y por separado aplicar a cualquier elemento ".red".

El Bloque B y el Bloque C son opcionales. Son para cualquier definición que solo quiera aplicar al selector dado. Normalmente aparece después de Bloque A porque las reglas de igual especificidad se aplican de arriba a abajo, por lo que puede anular cualquier cosa del Bloque A que desee en Bloque B o Bloque C, y esos bloques "ganarán".

Fuente

2011-06-13 06:19:53

Hmmm ... Entiendo el concepto, usted está tomando los atributos comunes para ser compartidos por ambos, las clases .btn: active y .red ... Pero verá, el contenido es EXACTAMENTE el mismo .. . Tal vez solo uso tu primera declaración? De esa forma, defino los atributos solo una vez, pero se aplican a las clases .btn: active y .red al mismo tiempo? – Abhishek

@Abhishek: Sí, eso es exactamente; si todo debería ser exactamente igual, simplemente defina la primera regla y no las otras dos. Los otros dos son solo si necesita definir algunas propiedades adicionales que son específicas solo para ".btn: activo" o ".red" pero no para el otro. Todo lo que comparten va en la primera regla. Si comparten todo, esa es la regla * solo *. –

K mate, gracias por la asistencia bastante superrápida ... :-) – Abhishek

¿Llamar a una clase CSS dentro de otra clase?

Respuesta

Cuestiones relacionadas