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

Me siento tonto por haber sido un programador web durante tanto tiempo y no saber la respuesta a esta pregunta, de hecho espero que sea posible y simplemente no sabía más de lo que creo que es la respuesta (que es que no es posible) .

Mi pregunta es si es posible hacer una clase CSS que "herede" de otra clase CSS (o más de una).

Por ejemplo, digamos que teníamos:

.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 en un nivel más alto de abstracción similar a lo que describe.

Menos llama a estos "Mixins"

En vez 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 varias clases a un único elemento DOM, por ejemplo

<div class="firstClass secondClass thirdclass fourthclass"></div>

Las reglas dadas en clases posteriores (o que son más específicas) se anulan. Así fourthclassque en ese ejemplo prevalece el tipo de.

La herencia no es parte del estándar CSS.

Sí, pero no exactamente con esa sintaxis.

.composite,
.something { display:inline }

.composite,
.else      { background:red }

Mantenga sus atributos comunes juntos y asigne atributos específicos (o anular) 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;
}

Un elemento puede tomar múltiples clases:

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

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

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

No, no puedes hacer algo como

.composite 
{
   .something;
   .else
}

Estos no son nombres de "clase" en el sentido OO. .somethingy.else son solo selectores nada más.

Pero puedes especificar dos clases en un elemento

<div class="something else">...</div>

o podrías buscar otra forma de herencia

.foo {
  background-color: white;
  color: black;
}

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

<div class="foo">
  <p class="bar">Hello, world</p>
</div>

Donde los párrafos backgroundcolor y color se heredan de la configuración en el div adjunto que tiene el .fooestilo. Puede que tenga que verificar la especificación exacta del W3C. inheritde todos modos es el valor predeterminado para la mayoría de las propiedades, pero no para todas.

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

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

Esto encontrará todos los elementos con la clase "compuesto" y agregará las clases "algo" y "otra cosa" a los elementos. Entonces algo así <div class="composite">...</div>terminará así:
<div class="composite something else">...</div>

La forma SCSS para el ejemplo dado sería algo como:

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

.composite {
  @extend .something;
  @extend .else;
}

Más información, consulte los conceptos básicos de Sass

Lo mejor que puedes hacer es esto

CSS

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

HTML

<div class="car benz">
  <p>I'm bold and blue.</p>
</div>
<div class="car toyota">
  <p>I'm bold and white.</p>
</div>

No olvides:

div.something.else {

    // will only style a div with both, not just one or the other

}

En archivo Css:

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

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

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

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

Si tiene, por ejemplo, .umbrellaClassque "hereda" de .baseClass1y .baseClass2podría tener listo JavaScript que se activa.

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

Ahora todos los elementos de .umbrellaClasstendrán todas las propiedades de ambos .baseClasss. Tenga en cuenta que, como la herencia OOP,.umbrellaClass puede o no tener sus propias propiedades.

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

Sin embargo, apesta css no tiene herencia nativa.

Momento 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 se super ve igual footer, pero con una fuente diferente, usaré la técnica de inclusión de clase de Less (lo llaman mixin) para decirle que incluya estas declaraciones también:

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

Desafortunadamente, CSS no proporciona 'herencia' en la forma en que lo hacen los lenguajes de programación como C ++, C # o Java. No puede declarar una clase CSS y luego extenderla 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 aplicará el navegador.

<span class="styleA styleB"> ... </span>

CSS buscará todos los estilos que se pueden aplicar en función de su marcado, y combinará los estilos CSS de esas múltiples reglas juntas.

Por lo general, los estilos se fusionan, pero cuando surgen conflictos, el estilo declarado más tarde generalmente ganará (a menos que el atributo! Important esté especificado en uno de los estilos, en cuyo caso eso gana). Además, los estilos aplicados directamente a un elemento HTML tienen prioridad sobre los estilos de clase CSS.

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

Eso no es posible en CSS.

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

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

Un lapso con la clase "myclass" tendrá ambas propiedades.

Otra forma es especificando dos clases:

<div class="something else">...</div>

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

Puede aplicar más de una clase CSS a un elemento mediante algo como esta clase = "algo más"

Como han dicho otros, puede agregar varias clases a un elemento.

Pero ese no es realmente el punto. Recibo tu pregunta sobre la herencia. El punto real es que la herencia en CSS se hace no a través de clases, sino a través de las jerarquías de elementos. Por lo tanto, para modelar rasgos heredados, debe aplicarlos a diferentes niveles de elementos en el DOM.

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

composite.something, composite.else
{
    blblalba
}

De repente funcionó para mí :)

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

.composite
{
display:inherit;
background:inherit;
}

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

Esto solo funciona si está agregando la clase .composite a un elemento hijo. Es una herencia "blanda" porque los valores no especificados en .composite no se heredan obviamente. Tenga en cuenta que todavía 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 usar una clase (o id) para una etiqueta primaria y luego usar combinadores CSS para alterar el comportamiento de la etiqueta secundaria desde 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);}

<p class="test"><span>One <span>possible <span>solution <span>is <span>using <span>multiple <span>nested <span>tags</span></span></span></span></span></span></span></span></p>

No sugeriría usar tantos tramos como el ejemplo, sin embargo, es solo una prueba de concepto. Todavía hay muchos errores que pueden surgir al intentar aplicar CSS de esta manera. (Por ejemplo, alterar los tipos de decoración de texto).

Less y Sass son preprocesadores de CSS que amplían el lenguaje CSS de formas valiosas. Solo una de las muchas mejoras que ofrecen es la opción que está buscando. Hay algunas respuestas muy buenas con Less y agregaré la solución Sass.

Sass tiene una opción de extensión que permite que una clase se extienda completamente a otra. Más sobre extender puedes leer en este artículo

En realidad, lo que está pidiendo existe, sin embargo, se hace como módulos adicionales. 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 pidiendo. Si desea escribir reglas con esa idea compuesta en mente, puede consultar la brújula . Es un marco de hoja de estilo que se parece al Menor ya mencionado.

Te permite hacer mixins y todo ese buen negocio.

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

Ese es el mejor truco que se me ocurrió.

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>

Luego aplique la variable global al elemento que desee en lugar de los nombres de clase en sí

<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

Eche un vistazo a la composición de CSS : https://bambielli.com/til/2017-08-11-css-modules-composes/

según ellos:

.serif-font {
    font-family: Georgia, serif;
}

.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

Lo uso en mi proyecto de reacción.

No piense en las clases css como clases orientadas a objetos, piense en ellas como una mera herramienta entre otros selectores para especificar qué clases de atributos se diseñan para un elemento html. Piense en todo entre las llaves como la clase de atributo , y los selectores en el lado izquierdo le dicen a los elementos que seleccionan para heredar atributos de la clase de atributo . Ejemplo:

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}

Cuando se da un elemento del atributo class="foo", es útil pensar en ella no como heredar los atributos de la clase .foo, sino de clase de atributo A y clase B atributo . Es decir, el gráfico de herencia tiene un nivel de profundidad, con elementos derivados de clases de atributos y los selectores que especifican dónde van los bordes y determinan la precedencia cuando hay atributos competitivos (similar al orden de resolución del método).

La implicación práctica para la programación es la siguiente. Digamos que tiene la hoja de estilo dada anteriormente y desea agregar una nueva clase .baz, donde debería tener la misma font-sizeque .foo. La solución ingenua sería esta:

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
.baz { font-size : 2em; /* attribute class C, hidden dependency! */}

¡Cada vez que tengo que escribir algo dos veces me enojo tanto! No solo tengo que escribirlo dos veces, ahora no tengo forma de indicarlo programáticamente .fooy .bazdebería tener lo mismo font-size, ¡y he creado una dependencia oculta! Mi paradigma anterior sugeriría que debería abstraer el font-sizeatributo de la clase de atributo A :

.foo, .bar, .baz { font-size : 2em; /* attribute base class for A */}
.foo, .bar { font-weight : bold; /* attribute class A */}
.foo { color : green; /* attribute class B */}

La queja principal aquí es que ahora tengo que volver a escribir cada selector de clase de atributo A de nuevo para especificar que los elementos que deben selecciona debe atributos también heredan de la clase base atributo A . Aún así, las alternativas son tener que recordar editar cada clase de atributo donde hay dependencias ocultas cada vez que algo cambia, o usar una herramienta de terceros. La primera opción hace reír a Dios, la segunda me da ganas de suicidarme.

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

http://dennisbareis.com/ppwizard.htm

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

Puede lograr lo que desea 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 '}';

...