CSS Attribute Selectors

Imagine sorting files in your cabinet. You have folders containing different documents. You want to group them, but instead of calling out specific names, you say: 'Bring me all files that are marked with a red dot', 'Only files that have the word "Tax" in their title', or 'All documents that end with ".pdf"'. CSS attribute selectors are those sorting labels. They allow you to style HTML elements based on what attributes (like href, title, type, or custom values) are declared inside their tags.

In this page:

Targeting Presence of Attributes
Targeting Exact Attribute Values
Targeting Word Matches (~=)
Targeting Ends-With Patterns ($=)
Targeting Starts-With Patterns (^=)

Targeting Presence of Attributes

The basic attribute selector (defined by wrapping the attribute key in brackets [attribute]) targets any element that possesses the specified attribute, regardless of what its value is.

Note: Use the basic attribute selector to apply custom cursor styles to any element featuring a title tooltip.

Warning: Make sure your selector key is enclosed in standard square brackets, or the browser will fail to parse it.

Example: Targeting Presence of Attributes

css

<style>
[title] {
  cursor: help;
}
</style>
<span title="Extra info">Hover for a tooltip cursor</span>

Targeting Exact Attribute Values

You can target elements that possess a specific attribute with an exact value using the syntax [attribute="value"]. This is incredibly useful for styling different form input types, like separating text fields from buttons.

Note: Use exact value selectors to style different form input fields cleanly without needing separate CSS classes.

Warning: The exact value match is case-sensitive and must be written inside double quotes.

Example: Targeting Exact Attribute Values

css

<style>
[type="text"] {
  border: 1px solid gray;
}
</style>
<input type="text">
<input type="submit" value="Go">

Targeting Word Matches (~=)

The word match selector [attribute~="value"] targets any element whose attribute value contains the specified word inside a space-separated list. This is useful for targeting element groups that share similar metadata strings.

Note: Use the word match selector to group and style related elements based on metadata values inside their attributes.

Warning: This selector only matches whole words; if the value is part of a longer word (like picker in colorpicker), it will fail to match.

Example: Targeting Word Matches (~=)

css

<style>
[class~="featured"] {
  border: 2px solid gold;
}
</style>
<div class="card featured">Matches "featured" as a whole word</div>

Targeting Ends-With Patterns ($=)

The ends-with selector [attribute$="value"] targets elements whose attribute value ends with a specified string pattern. This is incredibly useful for styling download links based on their file formats.

Note: Use the ends-with selector to automatically append PDF or ZIP icons next to your download links.

Warning: Always write your target string patterns in lowercase to ensure reliable matching.

Example: Targeting Ends-With Patterns ($=)

css

<style>
a[href$=".pdf"] {
  color: red;
}
</style>
<a href="report.pdf">Download report.pdf</a>

Targeting Starts-With Patterns (^=)

The starts-with selector [attribute^="value"] targets elements whose attribute value begins with a specified string pattern. It is commonly used to style external links differently from internal links by checking for secure 'https://' protocols.

Note: Use this selector to style external links with custom icons, indicating that the link leaves your site.

Warning: Be careful when matching protocols as some links might use non-secure http:// protocols instead.

Example: Targeting Starts-With Patterns (^=)

css

<style>
a[href^="https://"] {
  color: green;
}
</style>
<a href="https://example.com">Secure external link</a>

Common Mistakes

Forgetting to wrap attribute values inside double quotes in your CSS selectors.
Using word match selectors (~=) to search for partial text matches inside values.
Misspelling string patterns, which are highly case-sensitive during matching.

Chapter Summary

Attribute selectors target elements based on the presence, exact value, or partial value patterns of their HTML attributes.
Target exact matches using [attribute="value"], ending patterns with [attribute$="value"], and starting patterns with [attribute^="value"].
Use these selectors to cleanly format form inputs, file downloads, and external link behaviors automatically.

Browser Support

Standard CSS attribute selectors are natively supported by all modern web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Image Sprites Next Lesson → CSS Forms