Não é possível encontrar um seletor de atributo css “diferente”

103

Desejo segmentar elementos div onde o atributo "foo" tem um valor.

<div foo="x">XXX</div>
<div foo="">YYY</div>

Eu tentei este css, mas não funciona:

[foo!='']
{
   background: red;
}
css Adrian Rosca
fonte
2
w3schools.com/cssref/sel_not.asp
aniskhan001

Respostas:

175

Use o código como este:

div:not([foo=''])
{
    /* CSS Applied to divs having foo value Not nothing (or having a foo value assigned) */
}
mehulmpt
fonte
6

Um problema com a resposta aceita é que ela também selecionará elementos que não possuem nenhum fooatributo. Considerar:

<div>No foo</div>
<div foo="">Empty foo</div>
<div foo="x">XXX</div>
<div foo="y">YYY</div>
<div foo="z">ZZZ</div>

div:not([foo=''])irá selecionar o primeiro e o segundo divelementos. Se você deseja apenas divelementos que têm um atributo foo definido como uma string vazia, você deve usar:

div[foo]:not([foo=''])

Se desejar todos os elementos com atributo fooque não seja ynem z, você deve usar:

div[foo]:not([foo='y']):not([foo='z'])
moomoo
fonte
1

Você pode selecionar o primeiro usando 

[foo = 'x']{
  background:red;
}

FIDDLE

Leia isso

Sunil Hari
fonte
Suponha que haja 100 divs dos quais o valor foo está ausente (foo = '') para 50 divs e outros 50 divs têm valores foo diferentes, digamos foo = x ou y etc, então você precisa escrever 50 seletores se seguirmos a solução acima
Shoaib Chikate
2
Essa não é a operação que deseja: "Quero segmentar apenas a primeira das seguintes divs com um seletor de atributo css"
Sunil Hari
Sua resposta está certa com a exigência dele, mas não com uma solução geral que outras pessoas deram.
Shoaib Chikate
@ShoaibChikate Você está correto. Eu quero a solução mais genérica. Eu atualizei a pergunta para refletir isso.
Adrian Rosca