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".