A CSS "contains" selector is
td[class*="foo"]
I can select multiple classes with
td[class*="foo bar"]
This however will fail for <td class="foo baz bar" />
How can I do a CSS "contains" wildcard select?
BTW: I cannot use td.foo.bar
The selector you're looking for is as follows, see this question for more details.
td[class*="foo"][class*="bar"]
However, if you need to use selectors like that then it's often a sign that your class name logic is bad.
Honestly I don't know what you mean by "failing" td[class*="foo bar"] selector as it seems working to me in your particular case.
However, since the class names are separated by white spaces, you could use multiple [attr~=value] attribute selectors to select the elements having the classes as follows:
td[class~="foo"][class~="baz"] {
background-color: gold;
}
WORKING DEMO.
From the MDN:
[attr~=value] Represents an element with an attribute name of attr
whose value is a whitespace-separated list of words, one of which is
exactly "value".
Visit : CSS-Tricks (CSS Attribute Selectors)
From the above for finding a match of a given string to the string in the class specified according to your question , the only option I find working and correct is * and ~.
1. Demo for *
2. Demo for ~
Multiple attribute matches
Related
So I have a <div> which contains two classes <div class=vc_column-inner vc_custom_1583926619313>
I know how to select multiple classes with .class1.class2 and how to select a class attribute value that begins with "xx" div[class^="test"]
My question is, is there a way to select them?
The thing is I want to select all classes with vc_column-inner and vc_custom_ but all of them have different ending numbers.
(I cannot change the classes because it's predifined by Wordpress)
Use a combination of class name and attribute contains selector like so:
div.vc_column-inner[class*="vc_custom_"] {
/* your CSS here */
}
I have been reading up on attribute selectors, such as ~ ^ | etc, but I cant figure out the following:
How do I target an element with a class starting with lets say "abc" and also ends with "xyz".
The way I have it now is this:
div[class^="abc"][class$="xyz"]{}
But if my element looks like this, it wont work:
<div class="foo abcDExyz bar">
It only works if abcDExyz is the only class in the class attribute.
Basically, I want to target a class that starts with something... and ends with something. In between that, anything can go (such as 'DE' in my example)
Is my only option to use * instead?
thanks in advance!
You can only do this if you can guarantee that the substrings "abc" and "xyz" will never appear in any other class names within that element's class attribute, and they will never appear separately:
div[class*=" abc"][class*="xyz "]
And even this falls flat when that class name is the first, last, or only one in the class attribute (unless you include the respective ^= and $= attribute selectors, but it's all still very fragile).
Otherwise, you won't be able to do this reliably with just a selector, or even a list of selectors.
You'd have a much easier time if whatever "abc" and "xyz" are supposed to represent was its own class name, instead...
Is there any way to shorten a HTML element tag like this:
<input id=ctl00_ctl32_g_9bd32d9e_a30e_48f8_af0e_4c4b7e8ba1f5_createSuggestion>
In CSS so that I don't have to reference the entire thing and just use the createSuggestion part of it like this:
input createSuggestion{
margin-left:10%;
}
For instance, when producing a SQL query, sometimes a 'like %createSuggestion' would be used.
Any ideas?
You could achieve that by attribute selector as follows:
input[id$="createSuggestion"] {
margin-left: 10%;
}
6.3.2. Substring matching attribute selectors
[att$=val] Represents an element with the att attribute whose value
ends with the suffix "val". If "val" is the empty string then the
selector does not represent anything.
Add ClientIdMode="Static" in your server-side control to prevent that entirely.
If
.animal {background: yellow}
will apply the styling rule to any elements with a class containing the word animal, even if it also contains other words eg...
<li class="toy animal">Toy Bear</li>
then what is the need for the below syntax for selecting by partial attribute?
*[class~="animal"] {background: yellow}
Thanks
The only difference is, you can use .value syntax only for classes, when [attribute~="value"] can be used to match any attribute values.
But when you use [class~="className"] to match class attribute values, it is equivalent to standard .className syntax.
According to the selectors spec, the period . is an alternative for the ~= notation for the class attribute.
Thus, for HTML, div.value and div[class~=value] have the same meaning
Just to clarify the ~= meaning:
E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
Note that this is different than *=
In other words, .animal and [class~=animal] (without the *) are the same.
Maybe I am missing something, but they seem similar. If you use for example...
a[alt~="thumb"]
or...
a[alt*="thumb"]
What can I narrow my selection down to differently? I am at the understanding that ~ gives you a partial match in the quotes while the * gives you a partial match. I am going to fiddle with the code a little, but since I could not find a question on the subject here, thought it would make a good topic either way.
From the JQuery help (which supports the standard selectors):
a[alt~="thumb"]
Description: Selects elements that have the specified attribute with a
value containing a given word, delimited by spaces. This selector
matches the test string against each word in the attribute value,
where a "word" is defined as a string delimited by whitespace. The
selector matches if the test string is exactly equal to any of the
words.
a[alt*="thumb"]
Description: Selects elements that have the specified attribute with a
value containing the a given substring. This is the most generous of
the jQuery attribute selectors that match against a value. It will
select an element if the selector's string appears anywhere within the
element's attribute value. Compare this selector with the Attribute
Contains Word selector (e.g. [attr~="word"]), which is more
appropriate in many cases.
Basically the selector ~= only matches if the value is found surrounded by white space. The selector *= matches if the value is found anywhere.
<div alt='heading navigation'>
<div alt='head'>
div[alt~='head'] would match only the second div, but div[alt*='head'] would match both.
[att~=value] is a contains word selector.
So a [alt="foo"] selector will match <a alt="foo bar"> but will not match <a alt="foobar">.
[alt*="foo"] will match both though, because this doesn't discriminate on words or whatever. As long as it's in the value, it hits.