16.04.2025

Problemas com o Seletor :not(:empty) em CSS Usando Input como Exemplo

Resposta Rápida

Por exemplo, o seletor :not(:empty) em CSS funcionará corretamente apenas quando o elemento estiver completamente vazio, ou seja, não contém nenhum dado, incluindo espaços invisíveis e comentários HTML. É importante notar que até mesmo um único espaço em branco será considerado conteúdo, o que significa que o elemento não está vazio. Para estilizar um elemento verdadeiramente vazio, use o seguinte código:

/* Estilos para elementos vazios - borda azul */
.element:empty {
  border: 1px solid blue; /* tristeza e solidão expressas em azul */
}

Demonstração com elementos HTML:

<div class="element"></div> <!-- Estilos serão aplicados -->
<div class="element"> </div> <!-- O elemento contém um espaço, então não está vazio! -->

Use JavaScript para lidar com elementos do DOM que podem parecer vazios à primeira vista, mas tecnicamente não são:

document.querySelectorAll('.element').forEach(el => {
  if (el.innerHTML.trim() === '') { /* o método trim remove os espaços */
    el.style.border = "1px solid blue"; /* e aplica uma borda azul */
  }
});

Dessa forma, você pode garantir que os estilos sejam aplicados apenas a elementos realmente vazios, e os caracteres invisíveis não afetem isso.

Gerenciando Campos de Input

Os elementos <input> são um caso especial: eles são considerados vazios por padrão, e o seletor :not(:empty) não se aplica a eles. Com base nisso, as seguintes soluções podem ser propostas:

• Para estilizar campos de input com um atributo de valor vazio após a página ser carregada, use input[value=""].
• Se você precisa estilizar campos de input sem o atributo de valor, use input:not([value]).

Usando Placeholders

Se você precisa estilizar um campo de input com base na presença ou ausência de um placeholder, aplique a pseudo-classe :placeholder-shown:

input:placeholder-shown {  
  background-color: lightyellow; /* o campo ficará notavelmente mais claro */
}

Validação Dinâmica

As pseudo-classes :valid e :invalid permitem que você mude dinamicamente a aparência de um campo de input, refletindo sua validade ou invalidade:

input:not([value=""]):not(:focus):invalid {
  border-color: red; /* a cor vermelha avisa sobre um erro */
}

Estilizando com Selectores Adjacentes

Em CSS, o seletor + pode ser usado para estilizar elementos adicionais que vêm imediatamente após o campo de input:

input:invalid + .mensagem-validacao {
  display: block; /* A mensagem de erro se torna visível */
}

input:valid + .mensagem-validacao {
  display: none; /* A mensagem é escondida se tudo estiver ok */
}

Melhorando a Experiência do Usuário

As transições CSS podem proporcionar mudanças mais suaves para os elementos de input quando eles recebem foco ou quando a validação falha:

input:focus, input:invalid {
  transition: border-color 0.3s ease-in-out; /* mudanças acontecem de forma suave e sutil */
}

Recomendações Avançadas

A Importância da Compatibilidade

A compatibilidade entre navegadores continua sendo um aspecto importante. Diferentes navegadores podem interpretar o estado vazio dos elementos de maneira diferente. Verifique seu estilo em caniuse.com.

Usando JavaScript e Eventos do DOM

JavaScript oferece mais opções para controle preciso sobre os elementos:

document.querySelector("input").addEventListener("input", function() {
  if (this.value) {
    // Aplique estilos a um campo não vazio
  } else {
    // Caso contrário, estile como um campo vazio
  }
});

Observadores de Mutação

Os Observadores de Mutação do DOM podem ser uma escolha adequada para estilização adaptativa que responde melhor às mudanças no ambiente do que eventos tradicionais de mudança do DOM.

Usando o Atributo required

O atributo required permite destacar visualmente os campos que precisam ser preenchidos usando seletores CSS:

input:required:invalid:not(:focus) {  
  border-color: red; /* campo obrigatório é destacado, exigindo atenção */
}

Visualização

Considere o funcionamento do seletor :not(:empty) em CSS como a luz de uma lanterna 🔦 iluminando casas, onde há residentes 🏠:

Antes de acender a lanterna `:not(:empty)`:

🏠 [] (casa vazia, sem iluminação)
🏠 [🪑] (há uma cadeira na casa, mas está tudo escuro)
🏠 [🛏️] (há uma cama na casa, mas está tudo escuro)

Quando a lanterna `:not(:empty)` é acesa:

🔦🏠 (casa vazia, permanece na escuridão)
🔦🏠 [🪑] (a luz está acesa, a cadeira aguarda seu dono)
🔦🏠 [🛏️] (a luz está acesa, convidando a dormir na cama)

Recursos Úteis

1. :not() - MDN — Um guia completo sobre a pseudo-classe :not().
2. :empty - MDN — Descrição detalhada da pseudo-classe :empty.
3. :empty | CSS-Tricks — Uso eficaz do seletor CSS :empty.
4. :not | CSS-Tricks — Formas intrigantes de usar :not().
5. Referência de Seletores CSS — Visão geral dos seletores CSS3.
6. Dominando Seletores CSS Avançados — Um guia avançado sobre seletores CSS.
7. Suporte a Seletores CSS3 - Como eu uso... — Informações sobre o suporte a seletores CSS3 em diferentes navegadores.

Video

Navigation