¿Hay alguna forma de hacer referencia a un estilo CSS existente de otro estilo CSS usando CSS o javascript?

Question

Si tengo un estilo definido

.style1
{
   width: 140px;
}

¿Puedo hacer referencia a él desde un segundo estilo?

.style2
{
   ref: .style1;
}

¿O hay una forma a través de javascript / jQuery?

--- Editar

Para aclarar el problema, estoy tratando de aplicar cualquier estilo definido para #x y #c a .x y .c sin alterar el CSS ya que el CSS tendrá actualizaciones que están fuera de mi control.

Usé el ancho, pero en realidad el estilo sería algo más complejo con la fuente, el borde y otros elementos de estilo especificados.

La especificación de varios nombres de clase funciona cuando el estilo se aplica a una clase, así que marcaré las respuestas existentes como respuestas, pero necesito tomar el estilo que se aplica a una identificación y también aplicarlo a un estilo de clase. . Si eso tiene algún sentido.

Answer 1

No hay forma de hacerlo con CSS: es una característica muy solicitada, pero aún no está incluida en la especificación. Tampoco puedes hacerlo directamente con JS, pero hay una especie de solución pirata:

$('.style2').addClass ('style1');

Answer 2

puede lograr la misma funcionalidad al permitir que los elementos hereden múltiples estilos. ej.

<p class="style1 style2">stuff</p>

y luego su css incluiría, por ejemplo:

.style1 {width:140px;}
.style2 {height:140px;}

editar: en realidad, la respuesta de Robert podría aproximarse mejor al método que estás intentando lograr

.style1, .style2 {width: 140px;}
.style2 {height: 140px;}

<p class="style2">i will have both width and height applied</p>

Answer 3

Una forma de usar el mismo código para varios bloques es la siguiente:

 .style1, .style2 { width: 140px; }

Answer 4

Otra forma es usar la herramienta de preprocesamiento, como less y sass. Luego, después de compilar el archivo less / sass, aparecerá como css normal.

Aquí está la documentación de less y sass .

// example of  LESS

#header {
h1 {
  font-size: 26px;
  font-weight: bold;
  }
p { font-size: 12px;
  a { text-decoration: none;
    &:hover { border-width: 1px }
    }
  }
}


/* Compiled CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
 border-width: 1px;
}

Answer 5

Algunas opciones:

1. Genere su CSS dinámicamente, ya sea sobre la marcha o mientras crea sus hojas de estilo (uso macros de Visual Studio para implementar constantes para fuentes, números y colores, y para calcular los tonos claros y oscuros de colores). Este tema se ha discutido mucho en otras partes de este sitio.

2. Si tiene una cantidad de estilos que tienen un ancho de 140px y desea tener la flexibilidad de cambiar esa dimensión para todos esos estilos, puede hacer esto:

   div.FixedWidth {width:140px;}
   div.Style1 {whatever}
   div.Style2 {whatever}
   

y

    <div class="Style1 FixedWidth">...</div>
    <div class="Style2 FixedWidth">...</div>

Answer 6

¿Estás hablando de obtener todos los estilos computados establecidos en un Elemento en particular y aplicarlos a un segundo Elemento?

Si ese es el caso, creo que necesitarás iterar a través de los estilos computados de un Elemento y luego aplicarlos a las propiedades de texto / texto de tus otros Elementos para establecerlos como estilos en línea.

Algo como:

el = document.getElementById('someId');
var cStyle = '';
for(var i in el.style){
  if(el.style[i].length > 0){ cStyle += i + ':' + el.style[i] + ';';
}
$('.someClass').each(function(){ this.style.cssText = cStyle; });

Si sabe que solo tratará con un conjunto finito de propiedades CSS, podría simplificar lo anterior como:

el = $('#someId');
var styleProps = {'border-top':true,'width':true,'height':true};
var cStyle = '';
for(var i in styleProps){
  cStyle += styleProps[i] + ':' + el.style(styleProps[i]) + ';';
}
$('.someClass').each(function(){ this.style.cssText = cStyle; });

Advertiré el código anterior con el hecho de que no estoy seguro de si los IE devolverán un objeto CSSStyleDeclaration para una propiedad de estilo HTMLElement como lo hará Mozilla (el primer ejemplo). Tampoco le he dado una prueba a lo anterior, por lo que confío en él solo como pseudocódigo.

Answer 7

Estaba intentando lo mismo y encontré esta página web (así como algunas otras). No hay una forma DIRECTA de hacer esto. IE:

<html><head><title>Test</title><style>
.a { font-size: 12pt; }
.b { font-size: 24pt; }
.c { b }
</style></head><body>
<span class='c'>This is a test</span></body></html>

¿Funciona NO . El problema aquí es que usted (como yo) está tratando de hacer las cosas de una manera lógica. (es decir: A-then-B-then-C)

Como han señalado otros, esto simplemente no funciona. Aunque DEBE funcionar y CSS DEBE tener muchas otras características también. No es así, tienes que hacer un trabajo alrededor. Algunos ya han publicado la forma jQuery de solucionar esto, pero lo que quieres PUEDE lograrse con una pequeña modificación.

<html><head><title>Test</title><style>
.a { font-size: 12pt; }
.b,.c { font-size: 24pt; }
</style></head><body>
<span class='c'>This is a test</span></body></html>

Esto logra el mismo efecto, solo que de una manera diferente. En lugar de tratar de asignar " a " o " b " a " c " - simplemente asigna " c " a " a " o " b " ;. Obtienes el mismo efecto sin que afecte al resto de tu código.

La siguiente pregunta que debería aparecer en tu mente es " ¿Puedo hacer esto para varios elementos de CSS? (¿Como el tamaño de fuente, el peso de la fuente, la familia de fuentes?) La respuesta es SÍ. Solo agrega el ",. C " parte en cada una de las cosas de las que quieres que formen parte y todas esas " partes " se convertirá en parte de " .c " ;.

<html>
<head>
<title>Test</title>
<style>
.a  { font-size: 12pt; }
.b,.c   { font-size: 24pt; }
.d  { font-weight: normal; }
.e,.c   { font-weight: bold; }
.f  { font-family: times; }
.g,.c   { font-family: Arial; }
</style>
</head>
<body>
<span class='c'>This is a test</span>
</body>
</html>