CSS [attribute^=value] Selector

Description

The CSS [attribute^="value"] selector matches all elements whose attribute value starts with the specified value. The value can be any string, including a single character or a whole word. The following example selects all elements with a class attribute value that starts with "top":

.top-nav {
  background-color: #ccc;
}

This selector will match the following elements:

<div class="top-nav">This is the top navigation bar.</div>
<ul class="top-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

The [attribute^="value"] selector is useful for styling elements based on the value of their attributes. For example, you could use it to style all elements with a class attribute value that starts with "important", or to style all elements with a lang attribute value that starts with "en".

Here are some other examples of how to use the [attribute^="value"] selector:

/* Select all elements with a `class` attribute value that starts with "red" */
.red-element {
  color: red;
}

/* Select all elements with a `data-type` attribute value that starts with "image" */
[data-type^="image"] {
  display: block;
  margin: 10px;
}

/* Select all elements with an `hreflang` attribute value that starts with "es" */
[hreflang^="es"] {
  color: #000;
}

The [attribute^="value"] selector is a powerful tool for styling elements based on the value of their attributes. It can be used to create a wide variety of effects, such as highlighting important elements, styling elements based on their language, and creating responsive designs.

Syntax

[attribute^=value] {
    css declarations;
}

Example

a[title^="A"] {
   color: #3366ff;
   background: #ffff99;
}

Give it a Try

Click the button below to experiment with this selector.

Give it a Try!

Browser Support

The following table will show you the current browser support for the CSS [attribute^=value] selector.

Desktop
Yes	Yes	Yes	Yes	Yes

Tablets / Mobile
Yes	Yes	Yes	Yes	Yes	Yes