Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

No CSS declarar classe com tag ou só classe, como usar ?

Olá pessoal, tudo certo?

Nesta aula fiquei com uma dúvida de como funciona a declaração de classes sozinha ou de classes com a tag. vou tentar demonstrar minha dúvida a baixo.

Na aula era para aplicar o inline-block. declarei isso no CSS só com a classe, e não funcionou.

.produtos {
    display: inline-block;
}

Percebi que o instrutor tinha declarado a tag li também, ai funcionou perfeitamente.

.produtos li {
    display: inline-block;
}

Mas aqui surgiu a dúvida, nos passos seguintes da aula, cada ação do CSS foi declarada na marcação .produtosoutras na marcação .produtos li

Como sei que determinadas ações do CSS agem com a classe, e outras ações preciso ser mais especifico e adicionar a tag junto ?

Trecho do CSS da aula.

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

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
}

Trecho do HTML da aula.

<main>
    <ul class="produtos">
        <li>
            <h2>Cabelo</h2>
            <img src="imagens/cabelo.jpg">
            <p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
            <p class="produto-preco">R$ 25,00</p>
        </li>
        <li>
            <h2>Barba</h2>
            <img src="imagens/barba.jpg">
            <p class="produto-descricao">Corte e desenho profissional de barba</p>
            <p class="produto-preco">R$ 18,00</p>
        </li>
        <li>
            <h2>Cabelo + Barba</h2>
            <img src="imagens/cabelo+barba.jpg">
            <p class="produto-descricao">Pacote completo de cabelo e barba</p>
            <p class="produto-preco">R$ 35,00</p>
        </li>
    </ul>
</main>

Engraçado que escrevendo a pergunta aqui, acho que percebi a questão. Me parece que quando declaro somente a classe .produtos, as ações do css funcionam para tudo que está dentro da ul como uma unidade, um layer só .

Quando uso .produtos li, as ações do css funcionam para cada item da lista separadamente, que no caso são 3 itens ou 3 layers.

É isso mesmo ?

2 respostas
solução!

Oi, Davilson, tudo bem?

É isso mesmo. Nesse caso, você quer dizer que dentro da classe produtos, os li, vão receber tal estilização. Já quando você quer que a estilização vá para todos os elementos que estão compreendidos dentro de .produtos você estiliza somente a classe, esse é o efeito cascata do CSS. Se ficou alguma dúvida, é só falar :}

Ficou mais claro agora. Muito Obrigado, Laís Cavalcanti!