Tidak dapat menemukan pemilih atribut css "tidak sama"

103

Saya ingin menargetkan elemen div di mana atribut "foo" memiliki nilai.

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

Saya telah mencoba css ini, tetapi tidak berhasil:

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

Jawaban:

175

Gunakan kode seperti ini:

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

Satu masalah dengan jawaban yang diterima adalah bahwa jawaban tersebut juga akan memilih elemen yang tidak memiliki fooatribut sama sekali. Mempertimbangkan:

<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=''])akan memilih elemen pertama dan kedua div. Jika Anda hanya menginginkan divelemen yang memiliki atribut foo yang disetel ke string kosong, Anda harus menggunakan:

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

Jika Anda menginginkan semua elemen dengan atribut fooyang bukan ynor z, Anda harus menggunakan:

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

Anda dapat memilih yang pertama menggunakan 

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

BIOLA

Baca ini

Sunil Hari
sumber
Misalkan ada 100 div yang nilai foo tidak ada (foo = '') untuk 50 div dan 50 div lainnya memiliki nilai foo berbeda katakanlah foo = x atau y dll maka Anda perlu menulis 50 selektor jika kita mengikuti solusi di atas
Shoaib Chikate
2
Itu bukan keinginan operasi: "Saya ingin menargetkan hanya div pertama berikut dengan pemilih atribut css"
Sunil Hari
Jawaban Anda benar dengan persyaratannya tetapi bukan solusi umum yang telah diberikan orang lain.
Shoaib Chikate
@ShoaibChikate Anda benar. Saya ingin solusi yang lebih umum. Saya memperbarui pertanyaan untuk mencerminkan itu.
Adrian Rosca