CssHow-ToBeginner · 3 min read

How to Use Attribute Selector in CSS: Syntax and Examples

Use the [attribute] selector in CSS to target elements that have a specific attribute. You can also match attribute values exactly or partially using operators like =, ^=, $=, and *= inside the square brackets.

📐

Syntax

The basic syntax of an attribute selector is [attribute], which selects elements that have the specified attribute. You can also specify attribute values with operators:

[attribute="value"]: Selects elements with an attribute exactly equal to value.
[attribute^="value"]: Selects elements whose attribute value starts with value.
[attribute$="value"]: Selects elements whose attribute value ends with value.
[attribute*="value"]: Selects elements whose attribute value contains value anywhere.

css

[attribute] {
  /* styles */
}

[attribute="value"] {
  /* styles */
}

[attribute^="value"] {
  /* styles */
}

[attribute$="value"] {
  /* styles */
}

[attribute*="value"] {
  /* styles */
}

💻

Example

This example shows how to style all links (<a>) that have a title attribute, and how to style links whose href attribute starts with https.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute Selector Example</title>
<style>
a[title] {
  color: green;
  font-weight: bold;
}
a[href^="https"] {
  text-decoration: underline;
}
</style>
</head>
<body>
  <a href="https://example.com" title="Example Site">Secure Link with Title</a><br>
  <a href="http://example.com">Non-secure Link without Title</a><br>
  <a href="https://another.com">Secure Link without Title</a><br>
  <a href="#" title="Just a title">Link with Title but no href</a>
</body>
</html>

Output

Four links displayed: The first link text is green, bold, and underlined; the second link is normal; the third link is underlined only; the fourth link is green and bold only.

⚠️

Common Pitfalls

Common mistakes include:

Forgetting quotes around attribute values when they contain special characters or spaces.
Using the wrong operator for the intended match (e.g., = instead of *=).
Expecting attribute selectors to match partial words without using the correct operator.
Not considering case sensitivity in attribute values (CSS attribute selectors are case sensitive by default).

css

/* Wrong: missing quotes around value with spaces */
a[title=My Site] {
  color: red;
}

/* Correct: quotes included */
a[title="My Site"] {
  color: red;
}

📊

Quick Reference

Here is a quick summary of attribute selector operators:

Selector	Meaning
[attr]	Selects elements with the attribute `attr`
[attr="value"]	Selects elements where `attr` equals `value` exactly
[attr^="value"]	Selects elements where `attr` starts with `value`
[attr$="value"]	Selects elements where `attr` ends with `value`
[attr*="value"]	Selects elements where `attr` contains `value` anywhere

✅

Key Takeaways

Use square brackets [] to select elements by attribute in CSS.

Include quotes around attribute values when matching specific values.

Use operators like =, ^=, $=, and *= for exact or partial matches.

Attribute selectors are case sensitive by default.

Test selectors carefully to avoid common mistakes like missing quotes or wrong operators.