Can't Find a "Not Equal" CSS Attribute Selector

Can't find a not equal css attribute selector

Use the code like this:

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

CSS not() with attribute selector doesn't seem to work

You need to style all h2 element that are descendants of elements that are not [random-attribute~="value"] then style h2 that are.

It doesn't hurt to qualify the selector with a direct child combinator too.

Like so:

*:not([random-attribute~="value"]) > h2 {  color: red;}[random-attribute~="value"] > h2 {  color: blue;}

<div class="content">  <h2>Same valid selector, not working</h2>  <div random-attribute="value">    <h2>Valid selector turned blue.</h2>  </div></div>
<h2>some other heading</h2>

CSS [attribute=value] selector does not get applied

You’re not setting an attribute clicked but a property. The code below demonstrates how to use setAttribute and getAttribute correctly. Also, for custom properties you should use the data- prefix.

You need to use the ternary condition, instead of simply negating it: on the first click, the attribute is null. Negating it yields true, which is then set as an attribute and converted to a string 'true'. Negating this a second time will make it false → 'false'. Not because it was 'true', but because it was a non-empty string! Any further click will keep the attribute value at 'false'.

Also, because the attribute is neither 'true' nor 'false' at the first time, this is checking whether it’s not 'true'.

function doesntWork(div) {    div.setAttribute('data-clicked',div.getAttribute('data-clicked')!='true'?'true':'false');    console.log(div.getAttribute('data-clicked'));}
function works(div) {    // console.log(div.style['background-color'])    if(div.style['background-color'] === "red"){      div.style['background-color'] = "green";    }    else {      div.style['background-color'] = "red";    }             }

div {  background: green;  width: 100px;  height: 100px;  margin: 20px;  display: inline-block;  border-radius: 1em;}div[data-clicked="true"] {  background: red;}

<div onclick="works(this)"></div><div onclick="doesntWork(this)"></div>

Javascript querySelectorAll data attribute value not equal to

To avoid selecting other divs, use div[data-value]:not([data-value="0"]):

console.log(    document.querySelectorAll('div[data-value]:not([data-value="0"])'));

<div data-value="-1">0</div><div data-value="0">0</div><div data-value="1">1</div><div data-value="2">2</div><div>3</div>

Javascript querySelectorAll data attribute value not equal to

To avoid selecting other divs, use div[data-value]:not([data-value="0"]):

console.log(    document.querySelectorAll('div[data-value]:not([data-value="0"])'));

<div data-value="-1">0</div><div data-value="0">0</div><div data-value="1">1</div><div data-value="2">2</div><div>3</div>

Is there a CSS selector for elements lacking an attribute?

You can follow this pattern:

a:not([href])
input:not([type])

The attribute selector is used to select elements with the specified attribute.

:not is supported in all modern browsers and IE9+, if you need IE8 or lower support you're out of luck.

How to write a CSS Selector selecting elements NOT having a certain attribute?

I think more accurate CSS Selector is:

div[class]:not([style])>button

because the button element is a child of div element.

Hope it helps you!

How might I build a negative attribute selector in CSS?

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 completeness 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.

CSS Attribute Selector doesn't work

[] is a attribute selector, so you would have to select the style attribute like:

p[style*="color: red"] {
  border: 1px solid black;
}

JSFiddle Demo

*= selects the element if the attribute contains the string specified. An excellent article about CSS selectors can be found here.

That works, but only if there is a whitespace. If you don't know if it will have a whitespace or not, you could do it like:

p[style*="color: red"],
p[style*="color:red"] {
  border: 1px solid black;
}

---

Related Topics