Difference between [attribute~=value] and [attribute*=value]

Question

I cannot find the difference between these two selectors. Both seem to do the same thing i.e select tags based on a specific attribute value containing a 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 notoriously unreliable source, and not related to the W3C. Instead, consult the official CSS standard:

[attribute~=value] matches any entry in a space-delimited list.
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 Specs:

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

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

So, the main difference is that * means that the val may be anywhere in the value of attribute, but in case of ~ the val must me exact part of value which can be separated by whitespaces (like class attribute).

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

the [class*=val] is applied to both divs, but the [class~=val] is applied to the one where the val is separated by whitespaces from the other parts of an attribute.