How exactly is [att~=val] different from [att*=val] in CSS Attribute Selectors?
css, css-selectors, html
Solution
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.
Problem
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.