Aplicando CSS a Tipos de Campo: 'texto', 'senha', 'não checkbox'
Resposta Rápida
No CSS, o operador "ou" é representado pela listagem de seletores separados por vírgulas. Para excluir elementos, são usadas as pseudo-classes :not(). Aqui estão alguns exemplos:
/* Colorindo os campos de texto e e-mail de vermelho brilhante como um sinal de alerta */
input[type="text"], input[type="email"] {
color: red;
}
/* Outros elementos do formulário não precisam ser excessivos. Vamos melhorá-los */
input:not([type="checkbox"]) {
padding: 10px;
}Eficácia da Pseudo-Classe :not()
A pseudo-classe :not() tem a intenção original de excluir certos elementos, mas também pode ser combinada para criar seletores complexos de exclusão:
/* Vamos deixar os checkboxes e os botões de rádio sem bordas, para prepará-los para um estilo de verão */
input:not([type="checkbox"]):not([type="radio"]) {
border: 1px solid blue;
}No futuro, com o advento do CSS4, múltiplos seletores podem ser usados dentro de :not(), simplificando consideravelmente o código:
/* Agora tudo é feito da maneira mais concisa e compreensível possível */
input:not([type="checkbox"], [type="radio"]) {
border: 1px solid blue;
}Usando Cascata
Vamos trazer a cascata para nossa área técnica para aplicar e sobrepor estilos de forma elegante, por exemplo, para elementos do tipo checkbox:
/* Envolvendo todos os campos de entrada em um aconchegante cobertor cinza claro */
input {
background: lightgray;
}
/* Mas que os checkboxes mantenham sua naturalidade, pois recebem a maior atenção */
input[type="checkbox"] {
background: white;
}Entendendo as Limitações da Sintaxe do CSS
Apesar das inúmeras maneiras de estilizar com CSS, ele tem suas limitações. Para executar funções lógicas complexas, usar JavaScript é uma opção melhor.
Compatibilidade com Navegadores
Não se esqueça de testar seus estilos em uma variedade de navegadores para resolver problemas de renderização desigual das pseudo-classes.
Chamando o JavaScript para Ajuda
Quando o CSS não consegue atender às condições de "ou" e "não", o JavaScript entra em cena, capaz de lidar com tarefas mais complexas.
Visualização
Imagine um semáforo que controla os seletores CSS:
Semáforo para Seletores CSS:
| Modo | Pode Ir | Parar |
|--------|-----------------------|---------------------------|
| E | ✅🎯 #id e .class | 🚫 Quando o elemento está ausente |
| OU | ✅🎯 #id ou .class | 🚫 Quando ambos estão ausentes |
| NÃO | ✅🎯 Tudo menos .class | 🚫 Somente .class |Cada cor do semáforo representa a regra de seleção de seletores em CSS.
Resolvendo a Especificidade do CSS
Enfrentando estilos conflitantes? Compreender a especificidade do CSS ajudará você a restaurar a ordem.
Lembrando Aplicações Práticas
Lembre-se de exemplos práticos, como estilizar campos de entrada em formulários de acordo com seus tipos ou criar alternâncias de temas usando seletores.
Mantendo Desempenho Alto
A otimização é a chave para uma operação rápida e uma velocidade de carregamento notável de um site. Seletores eficientes atuam como um treinamento para o seu site.
Recursos Úteis
- Seletores CSS - Folhas de Estilo em Cascata | MDN — um guia detalhado sobre seletores CSS.
- Seletores Nível 4 — um estudo aprofundado sobre
:matches()para trabalhar com condições no CSS. - Tudo que você queria saber sobre Seletores de Atributo CSS | CSS-Tricks — treinamento avançado sobre o uso de seletores de atributo.
- Por que o seletor jQuery :not() não funciona no CSS? - Stack Overflow — discussão sobre as especificidades de como o
:not()funciona no CSS. - Propriedades e Valores Lógicos em CSS - Folhas de Estilo em Cascata | MDN — mergulhe no mundo das propriedades e valores lógicos em CSS.
- :not() - Folhas de Estilo em Cascata | MDN — guia passo a passo sobre como utilizar a pseudo-classe
:not()em CSS. - Posso usar... Tabelas de compatibilidade para HTML5, CSS3 e mais — verifique a compatibilidade de navegadores para a pseudo-classe
:matches().