De acordo com as Leis 12.965/2014 e 13.709/2018, que regulam o uso da Internet e o tratamento de dados pessoais no Brasil, ao me inscrever na newsletter do portal DICAS-L, autorizo o envio de notificações por e-mail ou outros meios e declaro estar ciente e concordar com seus Termos de Uso e Política de Privacidade.

Seletores multiclasse

Colaboração: Maurício (Maujor) Samy Silva

Data de Publicação: 27 de setembro de 2017

Seletor classe é aquele que casa com o elemento da marcação com base no valor do atributo class do elemento.

O valor do atributo class de um elemento da marcação é uma string de livre escolha do desenvolvedor composta por letras, hífens ( - ), underscores ( _ ) e números. Toda string criada com uso de somente letras é válida. Para outras combinações de caracteres na formação da string consulte o site do W3C.

O valor do atributo class não precisa ser único, ele pode ser uma lista de valores. Nesse caso as regras CSS definidas para cada um dos seletores de classe serão aplicadas ao elemento marcado com os diferentes valores de classe.

Nota do autor: O nome seletor multiclasse não é previsto na sintaxe oficial das especificações do W3C para seletores e foi usado nessa dica apenas para fins didáticos

Esse algorítimo de aplicação de estilização permite que se defina uma classe para estilização padrão de um componente da interface e várias outras classes com estilizações modificadoras da estilização padrão. O resultado é que conseguimos não somente padronizar como modularizar um componente.

O exemplo clássico que demonstra o uso e utilidade das multiclasses é na criação de botões.

Para ilustrar mostramos fragmentos da estilização dos botões criados pelo framework <B>Bootstrap</B> que adota as classes .btn, .btn-success, .btn-info, .btn-sm, .btn-lg entre outras.

Observe os fragmentos das regras CSS mostradas a seguir extraidas da folha de estilos do framework Bootstrap e destinadas a criar os botões de uma interface.

CSS

  /* regras CSS para criar todos os botões */
  .btn {  
     display: inline-block;
     line-height: 1.25;
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
     border: 1px solid transparent;
     padding: .5rem 1rem;
     font-size: 1rem;
     border-radius: .25rem;
     }
  /* regras CSS  para criar os botões primários */  
  .btn-primary {   
        color: #fff;
        background-color: #0275d8;
        border-color: #0275d8;
    }
  /* regras CSS  para criar os botões de sucesso */  
  .btn-success {   
     color: #fff;
     background-color: #5cb85c;
    }
  /* regras CSS  para criar os botões de informações */  
  .btn-info {   
        color: #fff;
        background-color: #5bc0de;
    }
  /* regras CSS  para criar os botões pequenos */  
  .btn-sm {   
        padding: .25rem .5rem;
        font-size: .875rem;
        border-radius: .2rem;
    }
  /* regras CSS  para criar os botões grandes */  
  .btn-lg {    
        padding: .75rem 1.5rem;
        font-size: 1.25rem;
        border-radius: .3rem;
    }

A seguir a marcação HTML para criar quatro diferentes botões (observe a inserção das classes nas tags de abertura dos botões).

HTML

  <button type="button" class="btn btn-success">
    Botão sucesso
  </button>
    
  <button type="button" class="btn btn-primary">
    Botão primário
  </button>
  
  <button type="button" class="btn btn-info btn-sm">
    Botão info pequeno
  </button>
  
  <button type="button" class="btn btn-success btn-lg">
    Botão sucesso grande
  </button>
  
  <!-- Possível criar mais cinco diferentes botões -->

A seguir a renderização dos quatro botões constantes da marcação mostrada quando aplicada a folha de estilos mostrada.

Botão sucesso    Botão primário

Botão info pequeno   Botão sucesso grande

A seguir a renderização dos outros cinco botões possíveis de se criar com essas classes e não constantes da marcação mostrada.

Botão sucesso pequeno   Botão primário pequeno

Botão primário grande   Botão info grande

Botão info

Sobre o autor

Maurício Samy Silva também conhecido como "Dinossauro das CSS" ou simplesmente Maujor® é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME).

No segundo semestre de 2003, com a pretensão de suprir a falta de material de consulta gratuita, em língua portuguesa, na internet, decidiu criar o site de tutoriais denominado Maujor, hospedado em http://www.maujor.com/ e destinado a divulgar as técnicas de desenvolvimento frontend. Maujor é autor de 15 livros de desenvolvimento web (http://livrosdomaujor.com.br) e está escrevendo mais um sobre CSS Grid Layout com previsão de lançamento em novembro de 2017.

Saiba mais: Facebook , Twitter.