CSS [attribute^=value] Selector

What You’ll Learn

The [attribute^=value] selector matches elements when an attribute value begins with a specific string. It is ideal for URL schemes, path prefixes, and class naming patterns.

Introduction

The [attribute^=value] selector in CSS is an attribute selector that targets elements whose specified attribute value starts with a given substring.

This is particularly useful for styling links by protocol, internal paths, form field name prefixes, or utility classes that share a common beginning — without adding extra classes to every element.

Definition and Usage

Write the attribute name in brackets, then ^= and the prefix in quotes: a[href^="https"]. The element matches only if the attribute value begins with those exact characters at the first position.

📝 Syntax

The signature of the starts-with attribute selector is:

[attribute^="value"] {
  /* CSS properties */
}

Basic Example

a[href^="https"] {
  color: #16a34a;
  font-weight: 600;
}

a[href^="/"] {
  color: #7c3aed;
}

Syntax Rules

• ^= checks that the attribute value begins with the given string.
• The match is case-sensitive.
• The prefix must be at the very start — not in the middle of the value.
• Combine with element names: a[href^="https"].
• Works with pseudo-classes: a[href^="https"]:hover.

Compare Attribute Operators

When to Use [attribute^=value]

• External links — Style links starting with https:// or mailto:.
• Internal paths — Highlight root-relative links like href="/about".
• Class prefixes — Target utility classes such as btn-primary via [class^="btn-"].
• Form fields — Style inputs whose name starts with a shared prefix.
• CDN assets — Match src values starting with a CDN domain.

Examples Gallery

Practice prefix matching with external URLs, internal paths, class prefixes, and form field names.

a[href^="https"] {
  color: #16a34a;
  font-weight: 600;
}

a[href^="https"]:hover {
  text-decoration: underline;
}

a[href^="/"] {
  color: #7c3aed;
  font-weight: 600;
}

a {
  color: #2563eb;
  text-decoration: none;
}

[class^="btn-"] {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.btn-primary { background: #2563eb; color: #fff; }
.btn-danger { background: #dc2626; color: #fff; }

input[name^="user_"] {
  border: 1px solid #93c5fd;
  background: #eff6ff;
  padding: 0.5rem;
  border-radius: 6px;
}

label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.field { margin-bottom: 1rem; }

⚠️ Common Pitfalls

• http vs https — [href^="http"] also matches https:// URLs because https starts with http. Put the more specific rule first or use https alone.
• Case sensitivity — HTTPS and https are different prefixes.
• Not substring — The match must be at the start of the value, not anywhere inside it.
• vs |= — Use |= for hyphen-separated locale codes; ^= is a plain character prefix match.

♿ Accessibility

• External link cues — Do not rely only on color to mark external links; add clear link text or icons.
• Form labels — Prefix-based input styling is visual only; always pair inputs with <label> elements.
• Contrast — Ensure styled link and button colors meet WCAG contrast requirements.

💡 Best Practices