CSS [attribute=value] Selector

What You’ll Learn

The [attribute=value] selector matches elements when an attribute value is exactly equal to a given string. It is perfect for form controls, link targets, and other predictable HTML attributes.

Introduction

The [attribute=value] selector in CSS is an attribute selector that targets elements whose specified attribute has a value that exactly matches the string you provide.

This allows precise styling based on HTML attributes like type, target, role, and lang — without adding extra classes to every element.

Definition and Usage

Write the attribute name in brackets, then = and the exact value in quotes: button[type="submit"]. The element matches only if the attribute value is identical to that string — no partial matches.

📝 Syntax

The signature of the exact-match attribute selector is:

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

Basic Example

a[target="_blank"] {
  color: #dc2626;
  text-decoration: underline;
}

button[type="submit"] {
  background-color: #16a34a;
  color: #fff;
}

Syntax Rules

• = requires the attribute value to match the quoted string exactly.
• The match is case-sensitive.
• Combine with element names: input[type="text"] is more specific than [type="text"].
• Works with pseudo-classes: input[type="text"]:focus.
• The element must have the attribute present for any match to occur.

Compare Attribute Operators

When to Use [attribute=value]

• Form controls — Style input[type="text"], input[type="email"], or button[type="submit"] differently.
• External links — Highlight links with target="_blank" so users know they open in a new tab.
• Accessibility roles — Target elements with role="navigation" or role="alert" when needed.
• Language — Style elements with lang="en" or other language codes.
• Data attributes — Match predictable values like data-state="active" in component libraries.

Examples Gallery

Practice exact matching with link targets, button types, text inputs, and checkboxes.

a[target="_blank"] {
  color: #dc2626;
  text-decoration: underline;
}

button[type="submit"] {
  background-color: #16a34a;
  color: #fff;
  border: 1px solid #16a34a;
}

button[type="button"] {
  background-color: #2563eb;
  color: #fff;
  border: 1px solid #2563eb;
}

input[type="text"] {
  border: 1px solid #cbd5e1;
  padding: 0.5rem;
  border-radius: 6px;
}

input[type="text"]:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: #7c3aed;
  cursor: pointer;
}

label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

⚠️ Common Pitfalls

• Partial values — [type="button"] does not match type="button-primary" or values containing extra text.
• Case sensitivity — type="Submit" and type="submit" are different matches.
• Missing attribute — If the attribute is absent, the selector never matches.
• Wrong operator — Use ^=, *=, or $= when you need partial matching instead of exact equality.

♿ Accessibility

• External link cues — Pair target="_blank" styling with visible text or an icon indicating a new tab.
• Focus states — Always provide a visible :focus style on form inputs; do not remove outlines without a replacement.
• Color alone — Do not rely only on color to distinguish submit vs cancel buttons; use clear labels.

💡 Best Practices