Solucionado
Na explicação do exercício diz que: leva-se em conta a última classe do atributo class do HTML. Se for assim, no caso desse exercício, a última classe é a classe .primeiro que define a fonte com o tamanho de 40px. Então prevaleceria o 40, certo? Não entendi porque na resposta eles dizem prevalecer o 30px.
Olá Eric,
ao meu ver você tem razão.
Já informei isso ao pessoal.
Aguarde.
Opa Eric, tudo bem? Então, esses conflitos que ocorrem de propriedades no CSS podem ser um pouco complicados mesmo. Funciona da seguinte forma.
Vc pode colocar propriedades CSS selecionando um elemento através de um ID, Classe ou pelo seletor de Tag mesmo. Cada um desses seletores tem uma prioridade que pode ser expressada por um número.
ID = 100
Classe = 10
Tag = 1
Por exemplo:
html:
<p id="testeID" class="testeClass">teste</p>css:
prioridade de 100:
#testeID {
font-size: 30px;
}
prioridade 10:
.testeClass {
font-size: 20px;
}
prioridade 1:
p {
font-size: 10px;
}No caso acima o que terá maior prioridade será o ID, ou seja, o font-size fica com 30px.
Repare que esses valores podem somar também, veja esse exemplo:
css:
prioridade 11 -> 10 da class + 1 do seletor de tag
p.testeClass {
font-size: 90px;
}
prioridade 111 -> 100 do ID + 10 da Class + 1 da tag
p#testeID.testeClass {
font-size: 200px;
}Agora vamos pensar no exercício, vou colar ele aqui.
.primeiro {
font-size: 40px;
text-align: center;
}
.importante {
font-size: 30px;
font-weight: bold;
}
p {
font-size: 16px;
text-align: left;
}Analisando ele podemos ver que tanto o
.primeiroquanto o
.importantetem o mesmo peso, ou seja, 10.
O que acontece então?
O que acontece é que ele pega a ordem deles, o último que for declarado será o que terá prioridade. Ou seja:
.importanteRepare que as propriedades que são selecionadas com o seletor de tag P são sobreescritas por quem tem mais prioridade. Tanto o
text-align: left;
quanto o
font-size: 16px;do seletor de tag são sobreescritos pelo .primeiro. Agora vemos que o .primeiro é sobreescrito pelo .importante porque o .importante está logo após ele.
O que o .importante sobreescreve?
font-size:30px;Apenas o font-size: 30px;
Ou seja, o valor final fica com:
font-size: 30px;
font-weight: bold;
text-align: center;Fez sentido?
Sempre que os elementos tiverem a mesma prioridade / peso, o último prevalecerá.
Espero ter ajudado, qualquer coisa é só perguntar!!
Abraço!
Eric acredito que a resposta do nosso amigo Yuri tenha solucionado sua dúvida, certo ?
Olá pessoal, desculpe a demora. Estava um pouco corrido aqui rs. Agradeço a todos pela prontidão das respostas.
Sobre o que o Yuri respondeu, eu entendi perfeitamente. Ficou bem claro. Já a dúvida que eu fiquei foi:
"Com isso em mente, qual o estilo do elemento
com o CSS abaixo?" (pergunta do exercício)
Então o "ser declarado" por último é no arquivo CSS ? Eu tinha entendido que era no atributo do HTML, que no caso do exercício, a classe primeiro vinha por último. Já no CSS, a classe importante aparece depois.
Então o que vale, é o que está por último no arquivo CSS?
Exatamente Eric, a ordem das tags e elementos no HTML não faz diferença para especifidade do css.
No html o que vale é por exemplo:
<div>
<p></p>
</div>Arquivo css:
div p {
}Nesse caso tem que seguir a ordem.
Espero ter ajudado.
Agora entendi. Muito obrigado Matheus.
De nada Eric, sempre que precisar não deixe de criar suas dúvidas.