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

excluir elemento css

Question

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

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

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

Answer 1

CSS realmente no hace lo que estás pidiendo. Si desea escribir reglas con esa idea compuesta en mente, puede revisar la compass . Es un marco de hojas de estilo que se parece al Less mencionado anteriormente.

Te permite hacer mixins y todos esos buenos negocios.

Answer 2

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

Pero ese no es realmente el punto. Recibo tu pregunta sobre herencia. El punto real 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 los rasgos heredados, debe aplicarlos a diferentes niveles de elementos en el DOM.

Answer 3

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 marca ... 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 según su marca y combinará los estilos CSS de esas múltiples reglas.

Por lo general, los estilos se combinan, pero cuando surgen conflictos, el estilo declarado más tarde generalmente ganará (a menos que el atributo! Important se especifique 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.

Answer 4

En archivo css:

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

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

Answer 5

En circunstancias específicas puedes 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 secundario. Es una herencia "suave" porque cualquier valor no especificado en .composite no se hereda obviamente. Tenga en cuenta que aún sería menos caracteres escribir simplemente "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

Answer 6

En realidad, lo que estás pidiendo existe, sin embargo, se hace como módulos adicionales. Echa un vistazo a esta pregunta en Better CSS en .NET para ver ejemplos.

Echa un vistazo a la respuesta de Larsenal sobre el uso de MENOS para tener una idea de lo que hacen estos complementos.

Answer 7

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 intervalo 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"

Answer 8

Existen herramientas como LESS , que le permiten redactar CSS a un nivel más alto de abstracción similar al que describe.

Menos llama a 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;
}

Answer 9

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 fundamentos sass.

Answer 10

Less y Sass son preprocesadores de CSS que extienden el lenguaje CSS de manera valiosa. 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 extendida que permite que una clase se extienda completamente a otra. Más sobre la extensión que puedes leer en este artículo.

Answer 11

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>

Answer 12

Mantenga sus atributos comunes juntos y vuelva a asignar atributos específicos (o de anulación).

/*  ------------------------------------------------------------------------------ */   
/*  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;
}

Answer 13

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

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

Si tiene, por ejemplo .umbrellaClass que "hereda" de .baseClass1 y .baseClass2 , podría tener listo algún JavaScript que se active.

$(".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 o no tener sus propias propiedades.

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

Chupa css no tiene herencia nativa, sin embargo.

Answer 14

Me encontré con el mismo problema y terminé usando una solución JQuery para hacer 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 "else" a los elementos. Así que algo como <div class="composite">...</div> terminará así:
<div class="composite something else">...</div>

Answer 15

Mientras que la herencia directa no es posible.

Es posible usar una clase (o id) para una etiqueta principal y luego usar combinadores de 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 intervalos 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 alterando tipos de decoración de texto).

Answer 16

No olvides

div.something.else {

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

}

Answer 17

No, no puedes hacer algo como

.composite 
{
   .something;
   .else
}

Estos 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

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

o puedes mirar en 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 estilo .foo . Es posible que tenga que verificar la especificación exacta de W3C. inherit es predeterminado para la mayoría de las propiedades, pero no para todas.

Answer 18

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

Ese es el mejor truco que se me ocurre.

<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

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

Answer 19

Puede agregar varias clases a un solo elemento DOM, por ejemplo,

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

La herencia no es parte del estándar CSS.

Answer 20

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

Answer 21

Puedes lograr lo que deseas si preprocesas tus archivos .css a través de php. ...

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

...

Answer 22

Puedes 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). Por lo tanto, cualquier solicitud de cambio con respecto a CSS no requiere ningún análisis de gran impacto.

Answer 23

Sí, pero no exactamente con esa sintaxis.

.composite,
.something { display:inline }

.composite,
.else      { background:red }

Answer 24

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 crear código CSS y HTML a través de macros. Nunca he entendido por qué más codificadores web no lo usan.

Answer 25

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

Es una especie de competidor para MENOS.

Answer 26

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

composite.something, composite.else
{
    blblalba
}

De repente me funcionó :)

Answer 27

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 te vas a poner, lamentablemente. Me encantaría ver esta característica, junto con los alias de clase algún día.

Answer 28

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:

Ya que la super ve igual que el footer , pero con una fuente diferente, usaré la técnica de inclusión de clase de Less (lo llaman una mezcla) para decirle que incluya estas declaraciones también:

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