Attribute Selectors

Intermediate ~9 min read

What are Attribute Selectors?

Attribute selectors target elements based on their attributes and values. They're powerful for styling forms, links, and data attributes!

Has Attribute [attr]

Select elements that have a specific attribute, regardless of its value.

HTML

CSS

<input type='text' placeholder='Normal' />
<input type='text' placeholder='Required' required />
<input type='text' placeholder='Disabled' disabled />

Exact Match [attr=value]

Select elements where the attribute exactly matches the specified value.

HTML

CSS

<input type='text' placeholder='Text' />
<input type='email' placeholder='Email' />
<input type='password' placeholder='Password' />
<input type='submit' value='Submit' />

Starts With [attr^=value]

Select elements where the attribute value starts with the specified string.

HTML

CSS

<a href='https://google.com'>Google (https)</a>
<a href='http://example.com'>Example (http)</a>
<a href='mailto:test@example.com'>Email</a>
<a href='tel:1234567890'>Phone</a>

Ends With [attr$=value]

Select elements where the attribute value ends with the specified string. Great for file types!

HTML

CSS

<a href='document.pdf'>PDF File</a>
<a href='image.jpg'>Image File</a>
<a href='video.mp4'>Video File</a>
<a href='page.html'>HTML Page</a>

Contains [attr*=value]

Select elements where the attribute value contains the specified string anywhere.

HTML

CSS

<div class='box primary'>Primary Box</div>
<div class='box secondary'>Secondary Box</div>
<div class='card primary'>Primary Card</div>
<div class='item'>Regular Item</div>

Data Attributes

Style elements based on custom data attributes. Perfect for state management!

HTML

CSS

<div class='status' data-status='success'>Success Message</div>
<div class='status' data-status='warning'>Warning Message</div>
<div class='status' data-status='error'>Error Message</div>

Pro Tip: Use data attributes with attribute selectors for state-based styling without adding/removing classes with JavaScript!

Summary

[attr] - Has attribute
[attr=value] - Exact match
[attr^=value] - Starts with
[attr$=value] - Ends with
[attr*=value] - Contains
Great for forms, links, and data attributes
Case-insensitive with i flag: [attr=value i]

Quick Quiz

Which selector matches attributes that end with a value?

[attr^=value]

[attr$=value]

[attr*=value]

[attr~=value]

Previous Pseudo Elements

Next Combinators

What are Attribute Selectors?

Has Attribute [attr]

Exact Match [attr=value]

Starts With [attr^=value]

Ends With [attr$=value]

Contains [attr*=value]

Data Attributes

Summary

Quick Quiz

Enjoying these tutorials?