1
resposta

Uma outra forma de fazer igual e poupando seus CRTL + V

<ul class="itens">
            <li >Atendimento ao cliente</li>
            <li >Espaço diferenciado</li>
            <li >Localização</li>
            <li >Profissionais qualificados</li>
</ul>

Eu imaginei que ao invés de atribuir repetidas vezes a classe "itens" a cada novo item da lista, poderíamos apenas atribuir a classe na tag "pai" que as "filhas" herdariam por herança o mesmo comportamento passado através do CSS. Acabou funcionando e economizando alguns CRTL + C e CRTL + V.

1 resposta

Olá Roberto, tudo bem?

Na programação existem várias formas de chegarmos no mesmo fim, dessa maneira também funcionará.

Acredito que no modelo da aula, quando se utiliza a class="itens" em todos os elementos <li>, o intuito do instrutor foi demonstrar o funcionamento da class, como um seletor que diferente do id, estiliza mais de um elemento.

Como citei, do seu modo também ira funcionar, mas precisamos estar atento que independente das formas, é necessário estilizarmos o bloco ul separado dos itens da lista, pois existem propriedades que obrigatoriamente são destinadas apenas ao bloco, como o display: inline-block por exemplo. O código ficaria assim:

  • No HTML:

              <ul class="itens">
                  <li>Atendimento aos Clientes</li>
                  <li>Espaço diferenciado</li>
                  <li>Localização</li>
                  <li>Profissionais Qualificados</li>
              </ul>
  • No CSS:

.itens {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}

.itens li {
    font-style: italic    
}

Espero ter ajudado, qualquer dúvida fique a vontade para perguntar. Bons estudos!