javascript - How might I build a negative attribute selector in CSS? - Stack Overflow

admin管理员组

文章数量:1296463

I am experimenting (might be foolhardy) with reproducing in CSS what Douglas Crockford refers to as a bottom value.

What's a bottom value?

In Javascript, bottom values are undefined and null.

I can take a custom-data attribute:

data-my-custom-attribute=""

and I can give it a value of null (using Unicode U+2400):

data-my-custom-attribute="␀"

In CSS, I can then reference any custom-data attribute which is null:

[data-my-custom-attribute="␀"] {

  [... CSS PROPERTIES HERE...]

}

Next up, I'd like to deploy an equivalent to this Javascript:

if (myCustomAttribute !== null) { ... }

But it seems I can't reference any custom-data which isn't null, because something like this:

[data-my-custom-attribute!="␀"] {

  [... CSS PROPERTIES HERE...]

}

doesn't work and isn't valid.

---

Having established that:

• [data-my-custom-attribute!="␀"]

doesn't work, it occurs to me that:

• [data-my-custom-attribute]:not([data-my-custom-attribute="␀"])

actually does work (and if nothing else es up, I'll stick with that).

Working Example:

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 12px;
}

.rectangle {
  display: block;
  width: 450px;
  height: 60px;
  margin-top: 12px;
  background-color: orange;
}

[data-my-custom-attribute="red"] {
  background-color: red;
}

[data-my-custom-attribute="yellow"] {
  background-color: yellow;
}

[data-my-custom-attribute="blue"] {
  background-color: blue;
}

[data-my-custom-attribute="␀"] {
  border-radius: 0;
  background-color: black;
}

[data-my-custom-attribute]:not([data-my-custom-attribute="␀"]) {
  border-radius: 50%;
}

<div data-my-custom-attribute="red"></div>
<div data-my-custom-attribute="yellow"></div>
<div data-my-custom-attribute="blue"></div>
<div data-my-custom-attribute="␀"></div>

<div class="rectangle"></div>

I am experimenting (might be foolhardy) with reproducing in CSS what Douglas Crockford refers to as a bottom value.

What's a bottom value?

In Javascript, bottom values are undefined and null.

I can take a custom-data attribute:

data-my-custom-attribute=""

and I can give it a value of null (using Unicode U+2400):

data-my-custom-attribute="␀"

In CSS, I can then reference any custom-data attribute which is null:

[data-my-custom-attribute="␀"] {

  [... CSS PROPERTIES HERE...]

}

Next up, I'd like to deploy an equivalent to this Javascript:

if (myCustomAttribute !== null) { ... }

But it seems I can't reference any custom-data which isn't null, because something like this:

[data-my-custom-attribute!="␀"] {

  [... CSS PROPERTIES HERE...]

}

doesn't work and isn't valid.

---

Having established that:

• [data-my-custom-attribute!="␀"]

doesn't work, it occurs to me that:

• [data-my-custom-attribute]:not([data-my-custom-attribute="␀"])

actually does work (and if nothing else es up, I'll stick with that).

Working Example:

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 12px;
}

.rectangle {
  display: block;
  width: 450px;
  height: 60px;
  margin-top: 12px;
  background-color: orange;
}

[data-my-custom-attribute="red"] {
  background-color: red;
}

[data-my-custom-attribute="yellow"] {
  background-color: yellow;
}

[data-my-custom-attribute="blue"] {
  background-color: blue;
}

[data-my-custom-attribute="␀"] {
  border-radius: 0;
  background-color: black;
}

[data-my-custom-attribute]:not([data-my-custom-attribute="␀"]) {
  border-radius: 50%;
}

<div data-my-custom-attribute="red"></div>
<div data-my-custom-attribute="yellow"></div>
<div data-my-custom-attribute="blue"></div>
<div data-my-custom-attribute="␀"></div>

<div class="rectangle"></div>

However,

[data-my-custom-attribute]:not([data-my-custom-attribute="␀"])

feels awkward and verbose. Is there really nothing better?

• javascript
• css
• null
• css-selectors

Share Follow edited Apr 16, 2021 at 14:43 BoltClock 724k165165 gold badges1.4k1.4k silver badges1.4k1.4k bronze badges asked Apr 16, 2021 at 14:38 RouninRounin 29.5k1313 gold badges9898 silver badges123123 bronze badges 6

• it doesn't feel that awkward and verbose and it seems to be the only solution since you have 2 conditions to fulfill – Temani Afif Commented Apr 16, 2021 at 14:46
• Re: "it doesn't feel that awkward and verbose" I like [attribute!="value"] much more than [attribute]:not([attribute="value"]). – Rounin Commented Apr 16, 2021 at 14:48
• even if the first exist you still need the condition that attribute exist so it will be [attribute][attribute!="value"] unless you define it to work only on existing attribute – Temani Afif Commented Apr 16, 2021 at 14:50
• That's not the case with [attribute^="value"], [attribute*="value"], [attribute$="value"] etc. – Rounin Commented Apr 16, 2021 at 15:04
• it's not the same. To have an attribute equal to something, it need to exist (you cannot have a non-existing attribute equal to something) but the not equal apply to non-existing attribute since if the attribute doesn't existe then it's for sure not equal to that value. – Temani Afif Commented Apr 16, 2021 at 15:07

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 9

Right. Conclusions.

Just as there already exist in CSS the following attribute selectors:

• [data-attribute="value"] // has data-attribute, the value of which is value
• [data-attribute^="value"] // has data-attribute, the value of which begins with value
• [data-attribute*="value"] // has data-attribute, the value of which contains value
• [data-attribute$="value"] // has data-attribute, the value of which ends with value

I was hoping there might be something like:

• [data-attribute!="value"] // has data-attribute, the value of which is not value

and then, by extension:

• [data-attribute!^="value"] // has data-attribute and its value doesn't begin with value
• [data-attribute!*="value"] // has data-attribute and its value doesn't contain value
• [data-attribute!$="value"] // has data-attribute and its value doesn't end with value

---

But, instead we only have:

• :not([data-attribute="value"]) // value is not value OR no data-attribute
• :not([data-attribute^="value"]) // value doesn't start with value OR no data-attribute
• :not([data-attribute*="value"]) // value doesn't contain value OR no data-attribute
• :not([data-attribute$="value"]) // value doesn't end with value OR no data-attribute

---

So the only way to get rid of the alternative possibilities (ie. after logical OR) is:

• [data-attribute]:not([data-attribute="value"]) // data-attribute value is not value
• [data-attribute]:not([data-attribute^="value"]) // value doesn't begin with value
• [data-attribute]:not([data-attribute*="value"]) // value doesn't contain value
• [data-attribute]:not([data-attribute$="value"]) // value doesn't end with value

Unfortunately, there isn't a more concise way. Even jQuery's [att!=val] selector, which has remained exclusive to jQuery all these years, doesn't require that the attribute be present to match, so you'd still need to pair that with [att].

I understand this is an experiment with the bottom value concept, but for the sake of pleteness I'll add that the closest things to a null attribute value in HTML (and by extension CSS) are either the empty string (the default value of custom data attributes), or the lack of the attribute entirely. The idiomatic way to achieve your desired result is to choose either the empty string or omission of the attribute altogether, and use a corresponding [data-my-custom-attribute=""] or :not([data-my-custom-attribute]) selector respectively in CSS, and if (myCustomAttribute === "") or if (("myCustomAttribute" in myDiv.dataset) === false) respectively in JS.

Attribute selectors are selected with attributes like example:

Example:

<style>
   a[target="_blank"] {
      background-color: yellow;
  }
</style>

<a href="http://www.google." target="_blank">google.</a>

本文标签： javascriptHow might I build a negative attribute selector in CSSStack Overflow