CSS [attribute*=value] Selector

What You’ll Learn

The [attribute*=value] selector matches elements when a specific substring appears anywhere inside an attribute value. It is perfect for URLs, file types, and naming patterns.

Introduction

The CSS [attribute*=value] selector targets elements whose attribute value contains a specific substring. The match can occur at the start, middle, or end of the value.

This is especially useful when attribute values vary but share a common pattern — such as links containing https, images ending in .png, or class names that include btn-.

Definition and Usage

Write the attribute name in brackets, followed by *= and the substring in quotes: a[href*="about"]. The element matches if about appears anywhere in the href value.

📝 Syntax

The signature of the substring attribute selector is:

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

Basic Example

a[href*="https"] {
  color: #2563eb;
  font-weight: 600;
}

a[href*="about"] {
  text-decoration: underline;
}

Syntax Rules

• *= means “attribute value contains this substring.”
• The substring match is case-sensitive.
• Combine with element names: img[src*=".png"].
• Quotes around the value are required when it contains special characters.
• Multiple rules can target different substrings on the same attribute.

Compare Attribute Operators

When to Use [attribute*=value]

• URL segments — Style links pointing to certain pages (about, blog).
• File types — Highlight .pdf, .zip, or image extensions in href or src.
• Protocol checks — Target https links for security indicators.
• Class prefixes — Theme all elements whose class contains btn- or card-.
• Data attributes — Match [data-theme*="dark"] for partial state values.

Examples Gallery

Practice substring matching with URLs, images, downloads, and class name patterns.

a[href*="https"] {
  color: #2563eb;
  font-weight: 600;
}

a[href*="about"] {
  text-decoration: underline;
}

img[src*=".png"] {
  border: 3px solid #16a34a;
  border-radius: 8px;
  padding: 4px;
}

a[href*="pdf"] {
  color: #dc2626;
  font-weight: 600;
}

[class*="btn-"] {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

⚠️ Common Pitfalls

• Case sensitivity — [href*="PDF"] will not match file.pdf.
• Over-matching — [href*="a"] matches almost every URL; keep substrings specific.
• Performance — Broad *= rules on large pages can be slower; prefer classes when possible.
• Specificity — Combine with element names (a[href*="pdf"]) to avoid unintended matches.

♿ Accessibility

• Do not rely on color alone — PDF indicators should include clear link text, not just red styling.
• Generated labels — If using ::after with PDF markers, ensure the link text is still descriptive.
• External links — Pair visual cues with accessible names and rel attributes where needed.

💡 Best Practices