¿Puede una clase CSS heredar una o más clases diferentes?

Me siento tonto por haber sido un progtwigdor web por tanto tiempo y sin saber la respuesta a esta pregunta, realmente espero que sea posible y simplemente no supe más que lo que creo que es la respuesta (que es que no es posible) .

Mi pregunta es si es posible crear una clase de CSS que “herede” de otra clase de CSS (o más de uno).

Por ejemplo, digamos que tuvimos:

.something { display:inline } .else { background:red } 

Lo que me gustaría hacer es algo como esto:

 .composite { .something; .else } 

donde la clase “.composite” se mostraría en línea y tendría un fondo rojo

Hay herramientas como LESS , que le permiten componer CSS a un nivel más alto de abstracción similar a lo que describe.

Menos llamadas estos “Mixins”

En lugar de

 /* CSS */ 
 #header { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #footer { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } 

Tu puedes decir

 /* LESS */ 
 .rounded_corners { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #header { .rounded_corners; } #footer { .rounded_corners; } 

Puede agregar múltiples clases a un solo elemento DOM, por ejemplo

 

La herencia no es parte del estándar CSS.

Sí, pero no exactamente con esa syntax.

 .composite, .something { display:inline } .composite, .else { background:red } 

Un elemento puede tomar múltiples clases:

 .classOne { font-weight: bold; } .classTwo { font-famiy: verdana; } 

I'm bold and verdana.

Y eso es lo más cerca que llegarás desafortunadamente. Me encantaría ver esta característica, junto con alias de clase algún día.

Mantenga sus atributos comunes juntos y asigne atributos específicos (o invalide) nuevamente.

 /* ------------------------------------------------------------------------------ */ /* Headings */ /* ------------------------------------------------------------------------------ */ h1, h2, h3, h4 { font-family : myfind-bold; color : #4C4C4C; display:inline-block; width:900px; text-align:left; background-image: linear-gradient(0, #F4F4F4, #FEFEFE);/* IE6 & IE7 */ } h1 { font-size : 300%; padding : 45px 40px 45px 0px; } h2 { font-size : 200%; padding : 30px 25px 30px 0px; } 

No, no puedes hacer algo como

 .composite { .something; .else } 

Esto no son nombres de “clase” en el sentido OO. .something y .else son solo selectores nada más.

Pero puedes especificar dos clases en un elemento

 
...

o puede buscar en otra forma de herencia

 .foo { background-color: white; color: black; } .bar { background-color: inherit; color: inherit; font-weight: normal; } 
 

Hello, world

Donde los párrafos backgroundcolor y color se heredan de la configuración en el div que se .foo que es .foo labrado. Es posible que deba verificar la especificación W3C exacta. inherit es el predeterminado para la mayoría de las propiedades de todos modos, pero no para todos.

Me encontré con este mismo problema y terminé usando una solución JQuery para que pareciera que una clase puede heredar otras clases.

  

Esto encontrará todos los elementos con la clase “compuesta” y agregará las clases “algo” y “otro” a los elementos. Entonces algo como

...

terminará así:

...

El modo SCSS para el ejemplo dado sería algo así como:

 .something { display: inline } .else { background: red } .composite { @extend .something; @extend .else; } 

Más información, revisa los fundamentos sass

No lo olvides

 div.something.else { // will only style a div with both, not just one or the other } 

Lo mejor que puedes hacer es esto

CSS

 .car { font-weight: bold; } .benz { background-color: blue; } .toyota { background-color: white; } 

HTML

 

I'm bold and blue.

I'm bold and white.

En el archivo Css:

 p.Title { font-family: Arial; font-size: 16px; } p.SubTitle p.Title { font-size: 12px; } 

Tiempo perfecto : pasé de esta pregunta a mi correo electrónico para encontrar un artículo sobre Less , una biblioteca de Ruby que, entre otras cosas, hace esto:

Como super ve como el footer , pero con una fuente diferente, usaré la técnica de inclusión de clases de Less (lo llaman mixin) para indicarle que incluya estas declaraciones también:

 #super { #footer; font-family: cursive; } 

Me doy cuenta de que esta pregunta ahora es muy antigua, ¡pero aquí no va nada!

Si la intención es agregar una sola clase que implique las propiedades de múltiples clases, como una solución nativa, recomendaría usar JavaScript / jQuery (jQuery no es realmente necesario pero ciertamente útil)

Si tiene, por ejemplo, .umbrellaClass que “hereda” de .baseClass1 y .baseClass2 , puede tener algo de JavaScript que se active en listo.

 $(".umbrellaClass").addClass("baseClass1"); $(".umbrellaClass").addClass("baseClass2"); 

Ahora todos los elementos de .umbrellaClass tendrán todas las propiedades de ambos .baseClass s. Tenga en cuenta que, al igual que la herencia OOP, .umbrellaClass puede tener o no sus propias propiedades.

La única advertencia aquí es considerar si hay elementos dinámicamente creados que no existirán cuando se active este código, pero también existen formas simples de hacerlo.

Sucks css no tiene herencia nativa, sin embargo.

Desafortunadamente, CSS no proporciona ‘herencia’ en la forma en que lo hacen los lenguajes de progtwigción como C ++, C # o Java. No puede declarar una clase CSS y luego ampliarla con otra clase CSS.

Sin embargo, puede aplicar más de una clase a una etiqueta en su marcado … en cuyo caso hay un conjunto sofisticado de reglas que determinan qué estilos reales serán aplicados por el navegador.

  ...  

CSS buscará todos los estilos que se pueden aplicar según su marcado, y combinará los estilos CSS de esas múltiples reglas al mismo tiempo.

Normalmente, los estilos se combinan, pero cuando surgen conflictos, el estilo declarado más tarde generalmente ganará (a menos que el atributo importante se especifique en uno de los estilos, en cuyo caso eso ganará). Además, los estilos aplicados directamente a un elemento HTML tienen prioridad sobre los estilos de clase CSS.

Puede aplicar más de una clase de CSS a un elemento por algo como esta clase = “algo más”

Como han dicho otros, puede agregar múltiples clases a un elemento.

Pero ese no es realmente el punto. Me sale tu pregunta sobre la herencia. El verdadero punto es que la herencia en CSS no se realiza a través de clases, sino a través de jerarquías de elementos. Entonces, para modelar rasgos heredados, debe aplicarlos a diferentes niveles de elementos en el DOM.

También hay SASS, que puedes encontrar en http://sass-lang.com/ . Hay una etiqueta @extend, así como un sistema de tipo mix-in. (Rubí)

Es una especie de competidor de LESS.

Eso no es posible en CSS.

Lo único que admite CSS es ser más específico que otra regla:

 span { display:inline } span.myclass { background: red } 

Un lapso con clase “myclass” tendrá ambas propiedades.

Otra forma es especificando dos clases:

 
...

El estilo de “else” anulará (o agregará) el estilo de “algo”

Estaba buscando eso como loco también y lo descubrí intentando cosas diferentes: P … Bueno, puedes hacerlo así:

 composite.something, composite.else { blblalba } 

De repente funcionó para mí 🙂

En realidad, lo que está pidiendo existe, sin embargo, se hace como módulos complementarios. Consulte esta pregunta sobre Better CSS en .NET para ver ejemplos.

Vea la respuesta de Larsenal sobre el uso de LESS para tener una idea de lo que hacen estos complementos.

CSS realmente no hace lo que estás preguntando. Si desea escribir reglas con esa idea compuesta en mente, es posible que desee retirar la brújula . Es un marco de hoja de estilo que se parece al ya mencionado Less.

Te permite hacer mezclas y todo ese buen negocio.

Para aquellos que no están satisfechos con las publicaciones mencionadas (excelentes), puede usar sus habilidades de progtwigción para hacer una variable (PHP o lo que sea) y hacer que almacene los múltiples nombres de clase.

Ese es el mejor truco que pude encontrar.

   

A continuación, aplique la variable global al elemento que desee en lugar de los nombres de clase en sí

  Le Champion est Ici  

En circunstancias específicas, puede hacer una herencia “blanda”:

 .composite { display:inherit; background:inherit; } .something { display:inline } .else { background:red } 

Esto solo funciona si agrega la clase .composite a un elemento secundario. Es una herencia “blanda” porque los valores no especificados en .composite no se heredan obviamente. Tenga en cuenta que aún sería menos caracteres simplemente escribir “en línea” y “rojo” en lugar de “heredar”.

Aquí hay una lista de propiedades y si lo hacen automáticamente o no: https://www.w3.org/TR/CSS21/propidx.html

Si bien la herencia directa no es posible.

Es posible utilizar una clase (o id) para una etiqueta primaria y luego usar combinadores de CSS para alterar el comportamiento de la etiqueta hija de su jerarquía.

 p.test{background-color:rgba(55,55,55,0.1);} p.test > span{background-color:rgba(55,55,55,0.1);} p.test > span > span{background-color:rgba(55,55,55,0.1);} p.test > span > span > span{background-color:rgba(55,55,55,0.1);} p.test > span > span > span > span{background-color:rgba(55,55,55,0.1);} p.test > span > span > span > span > span{background-color:rgba(55,55,55,0.1);} p.test > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);} p.test > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);} p.test > span > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);} 
 

One possible solution is using multiple nested tags

Si desea un preprocesador de texto más potente que LESS, consulte PPWizard:

http://dennisbareis.com/ppwizard.htm

Advirtiendo que el sitio web es realmente horrible y que hay una pequeña curva de aprendizaje, pero es perfecto para crear código CSS y HTML a través de macros. Nunca entendí por qué más codificadores web no lo usan.

Puede lograr un comportamiento similar a la herencia de esta manera:

 .p,.c1,.c2{...}//parent styles .c1{...}//child 1 styles .c2{...}//child 2 styles 

Ver http://jsfiddle.net/qj76455e/1/

La mayor ventaja de este enfoque es la modularidad: no crea dependencias entre clases (como lo hace cuando “hereda” una clase utilizando un preprocesador). Entonces, cualquier solicitud de cambio con respecto a CSS no requiere ningún gran análisis de impacto.

Less y Sass son preprocesadores de CSS que extienden el lenguaje CSS de forma valiosa. Solo una de las muchas mejoras que ofrecen es solo la opción que está buscando. Hay algunas respuestas muy buenas con Less y agregaré la solución Sass.

Sass tiene la opción de extender que permite que una clase se extienda por completo a otra. Más acerca de extender puede leer en este artículo

Puede lograr lo que quiere si preprocesa sus archivos .css a través de php. …

 $something='color:red;' $else='display:inline;'; echo '.something {'. $something .'}'; echo '.else {'. $something .'}'; echo '.somethingelse {'. $something .$else '}';