Entrar Ainda não tem acesso?
2
respostas

.produtos

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo A tag section e atividade Ajustando o tamanho dos elementos

por Estevam Raphael Flores Araneda
| 71.7k xp | 26 posts
Consultor de SAC I

Não estou conseguindo compreender sobre a divisão de comandos nas classes, por exemplo como foi feito em aula para a classe .produtos onde vamos indicando as margens, pois ao meu ver, tudo que esta em cascata pra "dentro" do ul class="produtos" já é algo que esteja dentro de li, então porque precisamos criar uma nova discriminação para .produtos li? Alguém pode me auxiliar comentando como são as considerações do comando no css? Obrigado desde já!

CSS:

.produtos{
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}


.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
}

HTML:

  • Cabelo

    Na tesoura ou na máquina, como o cliente preferir

    R$ 25,00

  • Barba

    Corte e desenho profissional de barba

    R$ 18,00

  • Cabelo + Barba

    Pacote completo de cabelo e barba

    R$ 35,00

2 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Estevam, tudo bem?

Essa sua observação lida com o nível de especificação, quando o professor utiliza a classe .produtos e dá estilos pra todos os elementos que estão compreendidos dentro da classe . produtos. Já o .produtos li é quando você que estilizar todos os elementos que estão em li e que são compreendidos por .produtos, ou seja, ele está especificando mais esse estilização, ela incorpora elementos mais especificos. Nesse caso, ele diz "vá na classe produtos e procure por todos os elementos li e faça isso". Veja, inclusive, que a estilização que é dada pra .produtos é diferente que para produtos li, pois estamos tratandos de niveis especificos diferentes.

Pegou mais ou menos a ideia? Se ficou alguma dúvida é só falar :}

por Estevam Raphael Flores Araneda
| 71.7k xp | 26 posts
Consultor de SAC I

Acho que entendi melhor com a sua explicação. Acabei experimentando fazer o seguinte também ao voltar na aula perceber a primeira orientação do instrutor: colocar um fundo cinza nos elementos de lista! E assim, a curiosidade me fez fazer o mesmo, mas ao invés de colocar no produtos li, colocar no produtos, o que traz um resultado diferente e significativo.

Ou seja, quando eu faço em produtos ele aplica pra um bloco maior, envolvendo tudo aquilo dentro enquanto na lista ele vai pegar cada um dos elementos mesmo. Respondi dessa maneira pra também, quem sabe auxiliar alguém na ideia, talvez não esteja perfeita mas acho que entendi melhor o raciocínio e buscando fazer um teste ou outro com as funcionalidades!

Obrigado, Laís! :D