[attributename|="val"]

This selector represents an element with the "attributename" attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-".

Syntax

elementname[attributename|="val"]{ properties }

Point, Note

This is primarily intended to allow language subcode matches.

Example

The following selector represents an a element for which the value of the hreflang attribute begins with "en", including "en", "en-US", and "en-scouse":

[style.css]

 a[hreflang|="en"]{
   font-style: italic;
 }

[index.html]

<body>
  <p><a href="http://www.w3.org/" hreflang="en-US">W3C</a> is an international community</p>
</body>

The CSS Selectors Level 3 specification defines the attribute selector in 6.3.1. Attribute presence and value selectors.