The difference between [attribute ~ = value] and [attribute * = value]

Question

I can not find the difference between these two selectors. Both seem to be doing the same thing. I select tags based on the specific attribute value containing the given string.

For [attribute~=value] : http://www.w3schools.com/cssref/sel_attribute_value_contains.asp

For [attribute*=value] : http://www.w3schools.com/cssref/sel_attr_contain.asp

Answer 1

w3schools is a known untrustworthy source and is not affiliated with W3C. Instead, refer to the official CSS standard:

[attribute~=value] matches any entry in the list with space separators.
It matches attribute="a value b" , but not attribute="a valueb" .

[attribute*=value] matches any substring.
It matches attribute="a value b" and attribute="a valueb" , but not attribute="x" .

Answer 2

According to specifications :

[att~=val] : represents an element with the attribute att, the value of which is a list of words separated by spaces, one of which is exactly "val". If "val" contains spaces, it will never represent anything (since words are separated by spaces). Also, if "val" is an empty string, it will never represent anything.

[att*=val] : represents an element with the attribute att whose value contains at least one instance of the substring "val". If "val" is an empty string, the selector does not represent anything.

So, the main difference is that * means that val can be anywhere in the attribute value, but in the case of ~ val I need the exact part of the value that can be separated by spaces (for example, the class attribute).

You can see it in action here: http://jsfiddle.net/kizu/bPX9n/

both divs use the class [class * = val], but [class ~ = val] applies to where val is separated by spaces from other parts of the attribute.

Answer 3

Please do NOT use w3schools. This is a bad site. You can learn more about why this is bad here .

You can find a good link about CSS3 selectors on w3c:

E [foo ~ = "bar"] element E, the value of the attribute "foo" is a list of values ​​separated by spaces, one of which is exactly equal to "bar"

E [foo * = "bar"] element E, the value of the attribute "foo" contains the substring "bar"

http://www.w3.org/TR/selectors/#selectors

Answer 4

This is why the people around here are preventing the use of w3schools.com as a reference site. The description of the two selectors on their website really does not allow them to be distinguished.

The best resource to use would be the official W3C documentation - this is pretty clear about the difference: http://www.w3.org/TR/selectors/

E [foo ~ = "bar"] element E, the attribute value "foo" is a list of values ​​separated by spaces, one of which is exactly equal to "bar"

E [foo * = "bar"] element E, the value of the attribute "foo" contains the substring "bar"

Basically the difference is that *= is a mute pattern; he will simply search for a line of correspondence no matter where it appears or what is around it, while ~= is a word break symbol; he will look for the corresponding value if it is a single word in the attribute. The corresponding word should be surrounded on both sides by either a space or the beginning / end of the line.

Answer 5

From this page :

E [foo ~ = "bar"] element E, the attribute value "foo" is a list of values ​​separated by spaces, one of which is exactly equal to "bar"

E [foo * = "bar"] element E, the value of the attribute "foo" contains the substring "bar"

Answer 6

From the jquery selector documentation :

Attribute contains selector [name * = "value"] Selects elements with the specified attribute with a value containing the specified substring.

The attribute contains a word selector [name ~ = "value"] Selects elements with the specified attribute with a value containing the specified word, which is limited by spaces.

In other words, using ~ = requires a "value" as a word / token, so "asdfword" will not be selected where "asdf word" will be. Using * = just searches for a substring, so both "asdfword" and "asdf word" will be selected.

Answer 7

*= for substring

~= designed to search for words

eg:

"these are test words"

attribute~="est" <= selected

attribute~="est" <= not selected (because "est" does not exist as a word)

Check out this link: http://www.w3schools.com/cssref/css_selectors.asp