Como uma classe de estilo CSS pode herdar de outra classe? – css classes herança

Pergunta:


Tenho uma classe circulo com várias propriedades: fonte e forma, etc
e tenho outra classe circulo1 com a propriedade tamanho e cor.

Tenho de fazer vários círculos de tamanhos de diferentes com a mesma cor e em vários lugares diferentes da página. Porém, não consigo fazer com que a classe circulo receba todas as propriedades da class circulo.

.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>
Autor da pergunta alexjosesilva

Zuul

Penso que não está claro para ti como funciona a atribuição de múltiplas classes de CSS a um elemento.

Quando no teu HTML tens:

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

Estás a dizer que o elemento vai obter os estilos da classe circulo e também da classe circulo1.

Como a classe circulo1 vem em segundo lugar, qualquer propriedade dada na classe circulo1 vai subscrever os valores das mesmas propriedades que tenham sido dadas na classe circulo, com exceção para valores sucedidos por !important.

Quando no teu CSS tens:

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

Estás a dizer que as propriedades entre os {} vai ser atribuídas aos elementos com a classe circulo que se encontra dentro de um elemento com a classe circulo2.

Por outro lado, quando tens:

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

Estás a dizer que as propriedades entre os {} vai ser atribuídas aos elementos que tenham ambas as classes .circulo3 e .circulo.

Nota:

O id de um elemento não pode começar por números, ver documentação (Inglês):

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 (“.”).


Se pretendes ter uma classe com propriedades base e classes auxiliares para definir propriedades especificas, deverás:

CSS

.classeBase {
  /* propriedades aqui */
}

.classEspecifica {
  /* propriedades aqui */
}

HTML

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

Assim estás a dar todas as propriedades definidas na classe classeBase a este elemento e também a acrescentar as propriedades definidas na classe classEspecifica.

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *