How can one CSS style class inherit from another class?

Question

I have a class circulo with various properties: source and shape, etc and I have another class circulo1 with the property size and color.

I have to make several circles of different sizes with the same color and in several different places on the page. However, I cannot get the circle class to receive all the properties of the circle class.

.circulo{
    color:#fff;
    line-height:300px;
    vertical-align:middle;
    text-align:center;
    font-size:30px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    margin: 10px;
    float: left;
}
    		
.circulo1 .circulo{
    background:red;
    width:280px;
    height:280px;
}
    		
.circulo2 .circulo{
    background:blue;
    width:280px;
    height:280px;
}
    		
.circulo3.circulo{
    background:red;
    width:280px;
    height:280px;
}
    		
.circulo4.circulo{
    background:blue;
    width:280px;
    height:280px;
}
    		
.circulo5.circulo{
    background:red;
    width:280px;
    height:280px;
}
    		
.circulo6.circulo{
    background:blue;
    width:280px;
    height:280px;
}

#bloco1{
    margin-left: 0%;
}		
    		
#bloco2{
    margin-left: 20%;	
}
#bloco3{
    margin-left: 40%;	
}

<div id="bloco1">
    <div id="1" class="circulo circulo1"> Tidbits1</div> 
    <div id="2" class="circulo circulo2">Tidbits2 </div>
</div>
    	
<div id="bloco2">
    <div id="3" class="circulo1"> Tidbits3</div> 
    <div id="4" class="circulo2">Tidbits4 </div>
</div>
    	
<div id="bloco3">
    <div id="5" class="circulo1"> Tidbits5</div> 
    <div id="6" class="circulo2">Tidbits6 </div>
</div>

Answer 1

I don’t think it’s clear to you how multiple CSS classes are assigned to an element.

When in your HTML you have:

 <div id="1" class="circulo circulo1"> Tidbits1</div>

You’re saying the element will get the class styles circulo and also of the class circulo1.

As the class circulo1 comes second, any property given in the class circulo1 will subscribe the values of the same properties that have been given in the class circulo, with the exception of !important.

When in your CSS you have:

.circulo2 .circulo {
  /* propriedades aqui */
}

Are you saying that the properties between the {} will be assigned to the elements with the class circulo which is inside an element with the class circulo2.

On the other hand, when you have:

.circulo3.circulo {
  /* propriedades aqui */
}

Are you saying that the properties between the {} will be assigned to items having both classes .circulo3 and .circulo.

Note:

The id of an element cannot start with numbers, see documentation ^(English):

ID and NAME tokens must Begin with a Letter ([A-Za-z]) and may be Followed by any number of Letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

---

If you want to have a class with base properties and auxiliary classes to define specific properties, you must:

CSS

.classeBase {
  /* propriedades aqui */
}

.classEspecifica {
  /* propriedades aqui */
}

HTML

<div id="meuId1" class="classeBase classEspecifica"></div>

So you’re giving all the properties defined in the class classeBase to this element and also to add the properties defined in the class classEspecifica.