I have a html code snippet.
[title~="ab"] {
color: red;
}
<div title="ab">I am div</div>
<div>
<p>I am p1</p>
</div>
<p title="abc">I am p2</p>
<p>I am p3</p>
<div>
<p title="ab">I am p4</p>
</div>
I know css selector [title~=ab]
should have select all title value which containing value ab
, if this is correct, why I am p2
is not selected?
Thanks.
>Solution :
You need to use [title*="ab"]
rather than [title~="ab"]
. *
is contains whereas ~
is contains word, as described here.