CSS [attribute^=value] Selector

CSS [attribute^=value] Selector

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The [attribute^=value] selector targets elements whose specified attribute starts with a given value. It is part of the CSS attribute selector family and is especially useful when working with predictable prefixes such as URL schemes, file extensions, class naming conventions, or data attributes. Instead of matching the entire attribute value, this selector checks only the beginning of the string, making it ideal for flexible pattern-based styling.

This selector works by scanning the attribute’s value from the very first character and applying styles only when the starting sequence matches exactly. For example, if you want to style all links that begin with https, the selector ensures that only secure links are matched, while ignoring others such as http or relative paths. Because it operates purely on string matching, it does not interpret meaning - only literal character sequences.

The [attribute^=value] selector is often used alongside other attribute selectors such as [attribute$=value] (ends with) and [attribute*=value] (contains). Together, these selectors allow for very granular targeting without relying on extra classes or JavaScript, which can help keep markup clean and semantic.

Example: Styling links that start with “https”

<a href="https://example.com">Secure Link</a>
<a href="http://example.com">Insecure Link</a>

a[href^="https"] {
  color: green;
  font-weight: bold;
}

In this example, only the first link is styled because its href attribute starts with https.

Example: Targeting data attributes

<div data-type="user-admin">Admin</div>
<div data-type="user-guest">Guest</div>

div[data-type^="user-"] {
  border-left: 4px solid blue;
  padding-left: 8px;
}

This applies styling to all elements whose data-type attribute begins with user-, making it useful for grouping related values without repeating CSS.

Practical use cases

Styling external links (href^="http")
Matching file types (src^="image")
Grouping elements using structured data-* attributes
Applying consistent UI styles without adding extra classes

The [attribute^=value] selector is widely supported and performs well, making it a reliable choice for modern CSS layouts and component-based design systems.

Syntax

[attribute^=value] { css declarations; }

Example

HTML

<body>



    <h2>Attribute Selector Example</h2>

    <p>Links starting with "https" will be green and bold:</p>



    <ul>

        <li><a href="https://www.google.com">Secure Google Link</a></li>

        <li><a href="http://www.example.com">Unsecure Example Link</a></li>

        <li><a href="https://www.wikipedia.org">Secure Wikipedia Link</a></li>

        <li><a href="mailto:info@example.com">Email Link</a></li>

    </ul>



</body>

CSS

/* Target <a> elements where the 'href' attribute starts with 'https' */

a[href^="https"] {

    color: #2ecc71;

    font-weight: bold;

    text-decoration: none;

    border-bottom: 2px solid #2ecc71;

}



/* General styling for list items */

li {

    margin: 10px 0;

    font-family: Arial, sans-serif;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS [attribute^=value] selector. Hover over a browser icon to see the version that first introduced support for this selector.