Is There a CSS Not Equals 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) */
}

Is there a CSS not equals selector?

In CSS3, you can use the :not() filter, but not all browsers fully support CSS3 yet, so be sure you know what you're doing which is now
supported by all major browsers (and has been for quite some time; this is an old answer...).

Example:

<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />

and the CSS

input:not(.avoidme) { background-color: green; }

Note: this workaround shouldn't be necessary any more; I'm leaving it here for context.

If you don't want to use CSS3, you can set the style on all elements, and then reset it with a class.

input { background-color: green; }
input.avoidme { background-color: white; }

CSS attribute selector class starts with but not equals to

As mentioned in your question:

Don't add whitespace unnecessarily. The whitespace just before the
:not is significant, i.e. it changes the meaning of the selector.


a[class^="abcd"]:not(.abcd-dontapply)
{
/* define CSS here*/
}

You can find all attribute selectors specifications here.

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>

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.

CSS Selector [type=var] not selecting lower-alpha versus upper-alpha

From the site you link to:

The value specified in an attribute selector is case sensitive if the attribute value in the markup language is case sensitive. Thus, values for id and class attributes in HTML are case sensitive, while values for lang and type attributes are not.

You are using a type attribute, which seems to be case-insensitive. Hence, with pure CSS, it's impossible to differentiate.

You might be stuck using JavaScript.

EDIT: Here's some JS to differentiate and add classes, a and A, respectively:

var alphaLists = document.querySelectorAll('ol[type="a"]');
for (var i = 0; i < alphaLists.length; i++) {
if (alphaLists[i].type == 'a') {
alphaLists[i].className += ' a';
}
if (alphaLists[i].type == 'A') {
alphaLists[i].className += ' A';
}
}

Fiddle

CSS selector to check that attribute does not contain both values

As you mentioned, you want something equivalent to :not([style*='display'][style*='none']), which is invalid in CSS, since :not() allows no combined selectors.

The laws of logic help us out here. Remember that !(a AND b) == !a OR !b, so we can write

:not([style*='display']), :not([style*='none'])

since in CSS, a, b matches elements that satisfy selector a OR selector b.

Again, as said in the question, this does not take the order of the words into consideration. The latter is impossible in CSS, since none of the CSS attribute selectors consider word order.

Is there a not equal to selector in Prototype js?

Try this,

     $("MyID").click(function () {
$$('li :not(.nav)').fadeToggle("fast", "linear");
});

Hope this helps...

CSS/JS selector - Select last element where class is not equal to

CSS doesn't have a "last" pseudoclass, and :last-child and :last-of-type are not applicable to what you want.

Since you seem to want to select the element with JavaScript, though, it's simple: Select all td that don't have .disabled and take the last one:

var list = document.querySelectorAll("td:not(.disabled)");
var last = list[list.length - 1];

Or scoped to that table:

var list = document.querySelectorAll("#example td:not(.disabled)");
var last = list[list.length - 1];

Example:

var list = document.querySelectorAll("#example td:not(.disabled)");var last = list[list.length - 1];console.log(last.innerHTML);
<table id="example">    <tr>        <td> ... </td>        <td class="disabled"> ... </td>        <td> ... </td>    </tr>    <tr>        <td class="disabled"> ... </td>        <td> ... </td>        <td> ... </td>    </tr>    <tr>        <td> ... </td>        <td> Value I want </td>        <td class="disabled"> ... </td>    </tr></table>


Related Topics



Leave a reply



Submit