Impossible de trouver un sélecteur d'attribut CSS "différent de"

103

Je veux cibler les éléments div où l'attribut "foo" a une valeur.

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

J'ai essayé ce css, mais cela ne fonctionne pas:

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

Réponses:

175

Utilisez le code comme ceci:

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

Un problème avec la réponse acceptée est qu'elle sélectionnera également des éléments qui n'ont pas du tout d' fooattribut. Considérer:

<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=''])sélectionnera à la fois le premier et le second divéléments. Si vous ne voulez divque des éléments dont l'attribut foo est défini sur une chaîne vide, vous devez utiliser:

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

Si vous voulez tous les éléments avec un attribut fooqui n'est ni yni z, vous devez utiliser:

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

Vous pouvez sélectionner le premier en utilisant 

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

VIOLON

Lis ça

Sunil Hari
la source
Supposons qu'il y ait 100 divs dont la valeur foo est absente (foo = '') pour 50 divs et que les autres 50 divs ont une valeur foo différente, disons foo = x ou y, etc., vous devez écrire 50 sélecteurs si nous suivons la solution ci-dessus
Shoaib Chikate
2
Ce n'est pas ce que l'op veut: "Je veux cibler uniquement le premier des divs suivants avec un sélecteur d'attribut css"
Sunil Hari
Votre réponse est juste avec son exigence, mais pas une solution générale que d'autres personnes ont donnée.
Shoaib Chikate
@ShoaibChikate Vous avez raison. Je veux la solution la plus générique. J'ai mis à jour la question pour refléter cela.
Adrian Rosca