Clever Geek Handbook

CSS [attribute ~ = value] selector behavior

This selector is used to select elements with an attribute value containing a given word.

For example title~="image"

will match title="image"

and title="first image"

.

But it won't match title="images"

even though the "images" contain the "image".

Can someone explain why? Thank.

+3


source to share


1 answer


From the CSS Selectors Specification :

[att~=val]


Represents an element with an att attribute whose value is a space-separated list of words , one of which is exactly "val" . If "val" contains spaces, it will never represent anything (since words are separated by spaces). Also, if "val" is an empty string, it will never represent anything.

If you want to match title="images"

, you can use the [att*=val]

substring matching selector instead :



[att*=val]


Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is an empty string, the selector represents nothing.

[class*="foo"] {
  margin: 0;
  color: green;
}
      

        
        
        
      

    
<figure class="foo">foo</figure>
<figure class="foo bar">foo bar</figure>
<figure class="bar foo">bar foo</figure>
<figure class="foos bar">foos bar</figure>
Run code


+7


source






More articles:


All Articles