English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS Reference Manual

CSS @rules (RULES)

Comprehensive CSS Attributes

CSS3 [attribute^=value] Selector

Represents an element that has an attribute named attribute and whose value starts with "value".

Complete CSS Selector Reference Manual

Online Example

Set the background color of all div elements with a class attribute value starting with "test":

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Basic Tutorial(oldtoolbag.com)</title> 
<style> 
div[class^="test"]
{
background:#ff9900;
}
</style>
</head>
<body>
<div class="first_test">The1A DIV element.</div>
<div class="second">The2A DIV element.</div>
<div class="test">The3A DIV element.</div>
<p class="test">This is a common text paragraph.</p>
</body>
</html>
Test and see ‹/›

Definition and Usage

The [attribute^=value] The selector matches elements whose attribute values start with the specified value.

Browser Compatibility

IEFirefoxOperaChromeSafari

All mainstream browsers support[attribute^=value] Selector.

Note: [attribute^=value] in IE8Running in the middle, it must declare<!DOCTYPE>

Online Example

Set the background color of all elements with a class attribute value starting with "test":

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Basic Tutorial(oldtoolbag.com)</title> 
<style> 
[class^="test"]
{
background:#ff9900;
}
</style>
</head>
<body>
<div class="first_test">The1A DIV element.</div>
<div class="second">The2A DIV element.</div>
<div class="test">The3A DIV element.</div>
<p class="test">This is a common text paragraph.</p>
</body>
</html>
Test and see ‹/›

Complete CSS Selector Reference Manual