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;
}
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadQuiero 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;
}
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>
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>
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>