Having Trouble with 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) */
}

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.

Does [attribute != value] exist anywhere in CSS or have I just made it up?

"!=" is jquery ":not()" is css.

But... what about [attribute != "value"] ?

jquery('[attribute != "value"]')

The jquery part can be modified with the css selector :not().

document.querySelector(':not([attribute="value"])')

More information about the jquery extension "!=" can be found in the documentaries:
https://api.jquery.com/attribute-not-equal-selector/

Because [name!="value"] is a jQuery extension and not part of the CSS
specification, queries using [name!="value"] cannot take advantage of
the performance boost provided by the native DOM querySelectorAll()
method. For better performance in modern browsers, use $(
"your-pure-css-selector" ).not( "[name='value']" ) instead.

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 the CSS [attribute=value] Selector unnecessary?

The * in [class*='example'] is a selector that retrieves all elements that contains example in the class-name and not just elements with the class-name example.

So [class*='example'] will target all of the following:

<div class="iamanexample"></div>
<div class="example"></div>
<div class="whereisyourexample"></div>

Whereas .example or [class='example'] will only target the second element <div class="example"></div> from the above three.

Other attribute selectors in CSS includes the:

~ selector: This selector retrieves all elements whose targeted attribute's value contains the exact queried value. This selector can include multiple values in the form of a whitespace-separated list of words.

| selector: This selector retrieves all elements whose targeted attribute's value is exactly the queried value or begins with queried value immediately followed by a hyphen.

^ selector: This selector retrieves all elements whose targeted attribute's value starts with the queried value.

$ selector: This selector retrieves all elements whose targeted attribute's value ends with the queried value.

Check and run the following Code Snippet for a practical example and explanation in the code comments on how each of the above selector works:

/* all elements whose abc value contains "ment" */div[abc*="ment"] { font-weight: 700; }
/* all elements whose abc value is exactly "element-1" */div[abc~="element-1"] { color: blue; }
/* all elements whose abc value is exactly "element" or begins with "element" immediately followed by a hyphen */div[abc|="element"] { background-color: green; }
/* all elements whose abc value starts with "x" */div[abc^="x"] { background-color: red; }
/* all elements whose abc value ends with "x" */div[abc$="x"] { background-color: yellow; }
div { margin: 5px 0px; }

<div abc="element-1">Hello World!</div><div abc="element-2">Hello World!</div>
<div abc="xElement1">Hello World!</div><div abc="xElement2">Hello World!</div>
<div abc="element1x">Hello World!</div><div abc="element2x">Hello World!</div>

CSS attribute selector for non-empty attributes

try this

<style>
    [Data-Attribute]:not([Data-Attribute=""])
    {
        background-color: Red;
    }
</style>

jQuery Does not have attribute selector?

Use the :not() selector.

$('.funding-plan-container:not([data-timestamp])')

This, by the way, is a valid Selectors API selector, so it isn't specific to jQuery. It'll work with querySelectorAll() and in your CSS (given browser support).

How to select element has attribute and attribute not equal to specific value using jquery?

JQuery Has Attribute Selector [name] select element only has attribute without consider to it value. You need to adding [attr] at the first of your selector.

$("ul").find("[class][class!='A']").css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul>  <li class="A">A</li>  <li class="A">A</li>  <li class="B">B</li>  <li>C</li></ul>

jQuery select class but not certain data attributes

You should use .filter() in combination with attribute value selector.

to select only those with data attributes 1, 11 and 12

$('.randomize_class').filter('[data-value=1],[data-value=11],[data-value=12]')

to select all of them except those with data attribute 1, 11 and 12. :not() Selector or .not() function to exclude the elements

 $('.randomize_class').filter(':not([data-value=1]),:not([data-value=11]),:not([data-value=12])')

$('div.randomize_class').not('[data-value=1],[data-value=11],[data-value=12]');