Question

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

The first one ([attribute~=value]) is a whitespace-separated search…

<!-- Would match -->
<div class="value another"></div>

…and the second ([attribute*=value]) is a substring search…

<!-- Would match -->
<div class="a_value"></div>

W3Schools doesn’t appear to make this distinction very clear. Use a better resource.