Entrar Ainda não tem acesso?
1
resposta

Classes em CSS

Referente ao curso HTML5 e CSS3 parte 1: crie uma página da Web, no capítulo Listas e divisões de conteúdo e atividade Trabalhando com listas

por Wilber Marcel da Silva
| 86k xp | 41 posts
Desenvolvedor 
    <ul>
                    <li class="itens">Atendimento aos clientes</li>
                    <li class="itens">Espaço diferenciado</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais qualificados</li>
                </ul>

Olá pessoal, tudo bem? Uma dúvida quanto ás classes em CSS.

Porque usar a propriedade "class" em cada um dos ítens da lista se eu poderia usar uma única vez dentro da tag "ul"?

Fiz um teste fazendo como eu disse ali em cima e o resultado pareceu o mesmo. Imaginem uma lista com vários ítens e eu tendo que criar uma classe para cada um deles. Seria muito cansativo, não?

Obrigado a quem responder!!

1 resposta
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Wilber, tudo bem?

Vamos lá, no primeiro momento pode parecer um trabalho sem sentido, mas isso tem relação com o quanto você quer estilizar seus componentes da página. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      .nav-item {
        color: blue;
      }
      .nav-item:last-child {
        color: red;
      }
    </style>
    <header>
      <nav>
        <ul class="nav-bar">
          <li class="nav-item"><a>Home</a></li>
          <li class="nav-item"><a>Contato</a></li>
          <li class="nav-item"><a>Sobre</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

Eu fiz um pequeno exemplo de como as classes mais especificas nos elementos fazem sentido dentro do layout. No exemplo que fiz, utilizei a classe nav-item dentro da tag li, e lá coloquei eles com color: blue;, mas no meu layout ficou definido que o último item da lista ficaria com color: red, então, utilizei uma pesudo classe (assunto que verá mais a frente ao longo da formação) para conseguir colocar a cor vemelha. Veja que sem essa nivel de especificidade, eu não conseguiria. Se quiser fazer o teste, trocando a classe nav-item por nav-bar, você que não conseguimos fazer a regra do layout acontecer.

Ao longo dos cursos a necessidade das classes ficará mais clara.

Se ficou alguma dúvida é só falar!