css element selecting not working as expected

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.