Attribute Selectors

6 min read

Targeting Elements by Their Attributes

Attribute selectors let you match elements based on the presence or value of any HTML attribute. They are enclosed in square brackets and support several matching operators.

css

/* Has the attribute at all */
[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Exact value match */
[type="submit"] {
  background: #10b981;
}

/* Value starts with */
a[href^="https"] {
  color: #059669;
}

/* Value ends with */
a[href$=".pdf"]::after {
  content: " (PDF)";
}

/* Value contains substring */
[class*="icon"] {
  display: inline-block;
  width: 1em;
  height: 1em;
}

Attribute selectors are case-sensitive by default. Append i before the closing bracket — e.g. [type="text" i] — to make matching case-insensitive.

Ready to test yourself?

Practice CSS— quiz & coding exercises