CSS Selector - How to use CSS starts with Selector [attribute|=value]

The [attribute|=value] selector selects elements whose attribute starts with value.

element1[lang|="lc"] is also called Language Attribute Selector.

Language Attribute Selector selects any element with a lang attribute whose value is a hyphen-separated list of values, starting with the value provided in the selector.

Examples:

html[lang|="tr"] {color: red;}

Summary

CSS Version: 2

CSS Syntax

[attribute|=value] { 
   style properties 
}

Browser compatibility


`[attribute\|=value]`	Yes	7.0	Yes	Yes	Yes

Example

An example showing how to use [attribute|=value] CSS selector.

<!DOCTYPE html>
<html>
<head>
<style>
[lang|=en]<!-- ww  w.  j a  v a 2 s. c o  m-->
{
    background:yellow;
}
</style>
</head>

<body>
    <p lang="en">en</p>
    <p lang="en-us">en-us</p>
    <p lang="en-gb">en-gb</p>
    <p lang="no">no</p>
</body>
</html>

Click to view the demo

Example 2

The following code shows how to use class value in attribute selector.

<!DOCTYPE html>
<html>
<head>
<style>
[class|=my] {<!--   ww  w.ja  va 2  s  .  c  om-->
    background: red;
}
</style>
</head>
<body>
    <h1 class="my-header">Welcome</h1>
    <p class="my-text">Hello world!</p>
    <p class="content">This is a paragraph.</p>
</body>
</html>

Click to view the demo