How exactly does [att ~ = val] differ from [att * = val] in CSS Attribute Selectors?

Maybe something is missing for me, but they seem similar. If you use, for example, ...

a[alt~="thumb"]

or...

a[alt*="thumb"]

How can I narrow my choice to another? I understand that ~ gives you a partial match in quotation marks, while * gives you a partial match. I am going to play a little with the code, but since I could not find a question on this issue here, I thought that this would be a good topic anyway.

+3
source share
2 answers

In jQuery help (which supports standard selectors):

a[alt~="thumb"]

: , , . , "" , . , .

a[alt*="thumb"]

: , . jQuery, . , . (, [attr ~ = "word" ]), .

~= . *= , .

<div alt='heading navigation'>
<div alt='head'>

div[alt~='head'] div, div[alt*='head'] .

+4

[att~=value] .

, [alt="foo"] <a alt="foo bar">, <a alt="foobar">.

[alt*="foo"] , , - . , .

+1

All Articles