Different attribute selector patterns and matching techniques
When to use each type of attribute selector
Practical use cases for attribute selectors in real-world projects
Advanced matching with substring and case-insensitive selectors
Introduction to Attribute Selectors
Attribute selectors allow you to target elements based on their attributes and attribute values,
providing powerful pattern matching capabilities beyond simple class and ID selectors. They're
especially useful for styling form elements, links, and any elements with data attributes.
These selectors are incredibly versatile and can match attributes in various ways: checking
for presence, exact values, partial matches, and more. Understanding attribute selectors
will significantly expand your ability to write precise, maintainable CSS.
[attribute] - Element Has Attribute
The simplest form of attribute selector checks if an element has a specific attribute,
regardless of its value. This is particularly useful for styling required form fields,
disabled buttons, or any element with a boolean attribute.
This selector targets elements where the attribute value exactly matches the specified value.
It's case-sensitive and requires a perfect match, making it ideal for targeting specific
input types or elements with precise attribute values.
This selector matches elements where the attribute value starts with the specified string.
It's extremely useful for targeting external links, protocol-specific URLs, or elements
with prefixed identifiers.
Styling secure (HTTPS) vs insecure (HTTP) links differently
Targeting external links: a[href^="http"]
Styling telephone links: a[href^="tel:"]
Email links: a[href^="mailto:"]
[attribute$="value"] - Ends With
This selector matches elements where the attribute value ends with the specified string.
It's perfect for targeting files by extension or elements with specific suffixes.
Add icons for different file types (.pdf, .doc, .zip, .mp3, etc.)
Style image links differently based on format (.jpg, .png, .svg)
Target specific URL patterns (ending in /blog, /shop, etc.)
[attribute*="value"] - Contains
This selector matches elements where the attribute value contains the specified substring
anywhere within it. It's the most flexible substring matcher and useful for finding
partial matches.
This selector matches elements where the attribute value contains the specified word
in a space-separated list. Unlike the *= selector, this matches whole
words only, making it perfect for working with class names.
<p class="featured item">This has "featured" class</p>
<p class="item">This doesn't</p>
<p class="prefeatured">This doesn't match either</p>
Key Difference from *=
[class~="featured"] matches class="item featured" but NOT
class="prefeatured". In contrast, [class*="featured"] would
match both.
[attribute|="value"] - Prefix Match (Language Code)
This selector matches elements where the attribute value is exactly the specified value
or starts with the value followed by a hyphen. It was originally designed for matching
language codes but can be used for any hyphen-prefixed values.
Styling content based on language: [lang|="en"], [lang|="fr"]
Matching version numbers: [data-version|="2"] matches "2" or "2-beta"
Prefix-based identifiers with hyphens
Case-Insensitive Matching
Modern CSS allows you to make attribute selectors case-insensitive by adding the
i flag before the closing bracket. This is particularly useful when
dealing with user input or data from various sources.
You can combine multiple attribute selectors to create highly specific targeting.
This is useful for complex forms or when you need very precise element selection.
Examples
/* Input that is both required AND of type email */
input[type="email"][required] {
border: 2px solid #dc3545;
background: #fff5f5;
}
/* Links that start with https AND end with .pdf */
a[href^="https"][href$=".pdf"] {
color: #28a745;
font-weight: bold;
}
/* Element with data-status containing "active" AND data-priority="high" */
[data-status*="active"][data-priority="high"] {
background: #ffd700;
}