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 .produtos
outras 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 ?