CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS element[attr~=value] Selector


What is element[attr~=value] Selector?

CSS [attr~=value] Selector matches all elements whose have attr attribute and value contain like "value".

Browser Compatibility

  • Google Chrome 2+
  • Mozilla Firefox 3+
  • Internet Explorer 9+
  • Opera 9.5+
  • Safari 1.3+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.

Syntax

This syntax apply to select every element whose have attr attribute and value contain like "value".

[attr~=value] {
	property: value;
	property: value;
	...
}

Example:

Select every element whose have whose have href attributes and value contain like "http://www.way2tutorial.com" to apply CSS style.

<style type="text/css">
a[href~="http://www.way2tutorial.com"] {
   background:yellow;
}
</style>
</head>
<body>
    <a href="http://www.way2tutorial.com">Way2Tutorial</a>
    <br />
    <a href="http://webtuts.way2tutorial.com">Webtuts</a>
</body>

Run it...   »

Example Result: