CSS Selector - How to use CSS attribute preceded Selector [attribute~=value]

The [attribute~=value] selector selects elements with an attribute value containing a specified word value.

element1[attr~="value"] is also called Partial Attribute Value Selector

Partial Attribute Value Selector selects any element based on a portion of the space-separated value of an attribute.

Examples:

a[rel~="friend"]  {text-transform:  uppercase;}
p[class~="warning"] {background: yellow;}

Summary

CSS Version: 2

CSS Syntax

[attribute~=value] { 
   style properties 
}

Browser compatibility


`[attribute~=value]`	Yes	7.0	Yes	Yes	Yes

Example

The following code shows how to use [attribute~=value] selector.

<!DOCTYPE html>
<html>
<head>
<style>
[title~=html] {<!-- www  . ja va2 s .  c o m-->
    border: 1px solid black;
}
</style>
</head>
<body>

<a href="" title="html" >html link</a>

</body>
</html>

Click to view the demo

Example 2

The ~= condition is for attributes that support multiple values separated by a space character, such as the class global attribute.

The following code uses Selecting Based on One of Multiple Values.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
[class~="class2"] {
  border: thin black solid;
  padding: 4px;
}<!--   w  w  w .ja  va  2s .  c o m-->
</style>
</head>
<body>
  <a id="anchor" class="class1 class2" href="http://java2s.com">
    Visit the website </a>
  <p>
    This is a <span class="class2">test</span>.
  </p>
  <a id="myAnchor" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>

Click to view the demo

The code above used the class global attribute.

The condition used in the selector is to match elements who define the class attribute and whose value for this attribute includes class2.