2

Tenho o seguinte HTML e seletor CSS:

main>*:not(.not-me) {
  background-color: cyan;
}
<main>
  <p>Azul!</p>
  <p class="not-me">Eu não!</p>
  <span>Eu também não!</span>
  <p>Azul!</p>
</main>

Mas eu não quero selecionar elementos que forem span. Para isso, eu posso usar o :not(span), mas, eu quero combinar com o seletor acima. Então, tentei com isso:

main>*:not(.not-me),main>*:not(span) { /* <--- tentei combinar com , */
  background-color: cyan;
}
<main>
  <p>Azul!</p>
  <p class="not-me">Eu não!</p>
  <span>Eu também não!</span>
  <p>Azul!</p>
</main>

Mas o resultado é que todos os elementos foram afetados. Acredito que é porque o separador , é um seletor OU seletor.

Eu posso fazer um seletor de forma que exclua dois ou mais seletores com o :not sem ter que declarar uma substituição?

1 Resposta 1

2

É possível concatenar o :not várias vezes, como por exemplo:

seletor:not(seletor):not(seletor):not(...)... {}

main>*:not(.not-me):not(span) {
  background-color: cyan;
}
<main>
  <p>Azul!</p>
  <p class="not-me">Eu não!</p>
  <span>Eu também não!</span>
  <p>Azul!</p>
</main>

Dessa forma, ele irá funcionar da forma AND NOT para todos os seletores especificados.

Felizmente, o :not é suportado na maioria dos navegadores modernos de hoje.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .