2
respostas

Dúvida nas classes

Qual a diferença dessas classes?E que informar em cada uma delas?

.produtos{
}
.produtos li {
}
nav{
}
nav li{
}
nav a{
}
2 respostas

Oi, Vinicius, tudo bem?

Vamos lá:

.produtos{ } Essa é uma classe que está estilizando as especificações do que foi definido como produtos no HTML.

.produtos li { } Essa é classe produtos mas quem está sendo estilizada é tag li que trás uma lista de elementos no HTML. Nesse caso, o instrutor preferiu não fazer uma classe somente para a lista, e sim usar a tag para não sujar o HTML.

nav{ } é a tag que menção a uma seção que aponta para outras páginas ou links.

nav li{ } Aqui segue a lógica de produtos li. Estilização de uma tag nav e li , que é uma lista de links dentro da tag nav.

nav a{ } E aqui é especificamente a estilização dos links, literalmente.

Esses links podem ajudar mais:/

https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/nav

https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/a

https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/li

Espero ter te ajudado!

Complementando e falando mais um pouco sobre a .produtos li { }, o css funciona em cascata, o que quer dizer que você pode acessar elementos mais internos caminhando pelos mais externos. A classe em questão é a .produtos e dentro de uma div com essa classe existia uma tabela (li). .produtos li estiliza em especifico somente a tabela (li) dentro da div cujo a classe é produtos. Caso dentro do li ainda existisse outra tag, por exemplo uma tag p, ela poderia ser estilizada com .produtos li p {}.