No puedo encontrar un selector de atributos CSS "no igual"

103

Quiero apuntar a elementos div donde el atributo "foo" tenga un valor.

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

He probado este CSS, pero no funciona:

[foo!='']
{
   background: red;
}
css Adrián Rosca
fuente
2
w3schools.com/cssref/sel_not.asp
aniskhan001

Respuestas:

174

Use el código como este:

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

Un problema con la respuesta aceptada es que también seleccionará elementos que no tienen ningún 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=''])seleccionará tanto el primer como el segundo divelemento. Si solo desea divelementos que tengan un atributo foo establecido en una cadena vacía, debe usar:

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

Si desea todos los elementos con atributo fooque no es yni z, debe usar:

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

Puede seleccionar el primero usando 

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

VIOLÍN

Lee esto

Sunil Hari
fuente
Supongamos que hay 100 divs de los cuales el valor foo está ausente (foo = '') para 50 divs y otros 50 divs tienen un valor foo diferente, digamos foo = xoy, etc., entonces debe escribir 50 selectores si seguimos la solución anterior
Shoaib Chikate
2
Eso no es lo que quiere la operación: "Quiero apuntar solo al primero de los siguientes divs con un selector de atributos CSS"
Sunil Hari
Su respuesta es correcta con su requisito, pero no es una solución general que otras personas han dado.
Shoaib Chikate
@ShoaibChikate Tienes razón. Quiero la solución más genérica. Actualicé la pregunta para reflejar eso.
Adrian Rosca