How can one CSS style class inherit from another class?

Question

How can one CSS style class inherit from another class?

Navigation

#1 by (17 votes)

9

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

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

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

classes css

asked by anonymous 17.10.2014 / 09:25

1 answer

How does the rotation of bits in C work? How to concatenate multiple Strings in Python?

score 17 · Accepted Answer

I think it's not clear to you how the assignment of multiple CSS classes to an element works.

When in your HTML you have:

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

You are saying that the element will get the styles of class circulo and also of class circulo1 .

As the circulo1 class comes second, any property given in the circulo1 class will subscribe to the values of the same properties that have been given in the circulo class, except for values succeeded by !important . / p>

When in your CSS you have:

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

You're saying that the properties between {} will be assigned to elements with the circulo class that is inside an element with the circulo2 class.

On the other hand, when you have:

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

You are saying that properties between {} will be assigned to elements that have both .circulo3 and .circulo .

Note:

The id of an element can not 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, _ "), colons (": "), and periods (". ").

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

CSS

.classeBase {
  /* propriedades aqui */
}

.classEspecifica {
  /* propriedades aqui */
}

HTML

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

So you are giving all the properties defined in the classeBase class to this element and also adding the properties defined in the classEspecifica class.