CSS [Attribute^="Value"] Selector

The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value. The following example selects all elements with a class attribute value that begins with "top":

HTML file: Displayed by browser:
<style>
[class^="top"] {
    background: yellow;
}
</style>
<body>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>

Welcome

Hello world!

Are you learning CSS?

Note: The value does not have to be a whole word.

Back button Table of Contents Next button