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
Display: Flex Not Working on Internet Explorer
Chrome/Safari Display Border Around Image
Valid Order for Attributes of Input Type Tag
How to Tell an HTML Element to Ignore Any Stylesheets
Text Gradient with Font Awesome
Angular2 Without Hash in The Url
How Position Absolute and Fixed Block Elements Get Their Dimension
Height Is Not Correct in Flexbox Items in Chrome
What Do Square Brackets in Class Names Mean
CSS - Hover Passes Through Elements to Activate Hover on Covered Element
How to Write Content That Screen Readers Will Ignore
CSS/HTML: Create a Glowing Border Around an Input Field
Are HTML5 Data Attributes Case Insensitive