0

Quiero obtener los estilos que tiene la clase .class-one y que se añadan a la clase .class-inheritance. ¿Hay manera de hacerlo?

.class-one {
  color: black;
}

.class-inheritance {
  background-color: red;
}
1
  • 2
    lo que deberias hacer es ponerle las dos clases a la etiqueta html para que tenga las dos propiedades de estilos el 1 jun. 2019 a las 16:36

3 respuestas 3

1

en la clase en html puedes poner mas de una clase, y aprovechando eso le pones las clases que quieres sin necesidad de heredar nada, y puedes tener el estilo de una clase base y añadirle mas

.font-green{
    color:green;
}

.red{
    background-color:red;
}
<span class="red font-green">HOLA</span>
<span class="font-green">HOLA</span>
<span class="red">HOLA</span>

1

Podrías utilizar el hecho de que las dos clases empiezan por class. Puedes crear unas reglas que se aplican a todas las clases que empiezan por class:

[class ^="class"] {...}

[class ^="class"] {
  box-sizing:border-box;
  border: 1px solid;
  width: 200px;
  height: 100px;
  margin: 1em;
  display: inline-block;
  text-align:center;
  line-height:100px;
  color: black;
}

.class-one {
  
}

.class-inheritance {
  background-color: red;
}
<div class="class-one">class-one</div>
<div class="class-inheritance">class-inheritance</div>

0

Lo que puedes hacer es juntar ambas clases en un mismo conjunto de reglas de estilo, es decir así: .class1, .class2

A continuación te dejo un ejemplo.

.cls1, .cls2{
  background-color: red;
}
<div class="cls1">
  <p>Parrafo 1 con la primer clase</p>
 </div>
 <br><br>
 <div class="cls2">
  <p>Parrafo 2 con la segunda clase<p>
  </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.