Entrar Ainda não tem acesso?
3
respostas

Ordem de precedência em classes CSS

Referente ao curso Layouts Responsivos: trabalhando com layouts mobile

por Gustavo Gonçalves Prado
| 177.3k xp | 9 posts
FULLSTACK DEVELOPER

Bom dia!! Acabei criando uma situação interessante ao utilizar a notação de 3 valores no CSS quando criei a classe 'destaques' com o shorthand 'padding: 2.5rem 0 2rem;'. Nisso vi que a classe 'container' não era "aplicada" no elemento section dos Destaques. Tentei inverter a ordem das classes no elemento mas ainda assim persistiu a classe 'destaques' sobre 'container' no elemento section.

Aí fica a pergunta: Como o CSS priorizou 'destaques' zerando os paddings laterais e adicionado top e bottom em detrimento a classe 'container' que possui os paddings laterais com os valores setados? Entendo que ele tenha aplicado toda a classe 'destaques' mas porque escolheu esta ao invés de aplicar 'container' ou então fazer um mix das duas - o que seria mais acertado eu acho?

3 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Gustavo, tudo bem? Vai depender de como está seu CSS e como ele está sendo carregado na página.

Ele vai aplicar os estilos mais novos para os elementos, ou seja:

.alguma-classe {
    padding-top: 5rem;
}

.alguma-classe {
    padding: 1rem 2rem;
}

Aqui a mais antiga seria o padding: 1rem 2rem; porque ele é declarado depois.

Isso também vale para o carregamento do CSS, o que carregar mais recente irá sobrescrever propriedades e seletores comuns carregados mais antigamente.

Espero ter ajudado.

por Gustavo Gonçalves Prado
| 177.3k xp | 9 posts
FULLSTACK DEVELOPER

Oi Matheus!! Agora ficou claro. Na ordem de importação dos CSS no index realmente Destaques vem depois de Container (que fica no base.css) e como eu estava com o shorthand em Destaques colocando o valor zero para right/left ele sobrescreveu estas propriedades. Por isso então a solução de setar especificamente right/left em Container e apenas top/bottom na Destaques e aí então o elemento mantem as 4 propriedades de padding.

Valeu!!

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Magina Gustavo, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.