Introduction to CSS Attribute Selectors

CSS attribute selectors allow you to target elements based on their attributes and attribute values. Instead of relying only on classes or IDs, you can style elements based on things like type, href, data-* attributes, and more.

They are incredibly useful when working with forms, links, JavaScript-driven interfaces, or any markup that already contains meaningful attributes.

Basic CSS Attribute Selector [attr]

The simplest attribute selector targets any element that contains a specific attribute, regardless of its value.

Syntax:

[attribute]

This selects all elements that have that attribute. 

 input[required] { outline: 3px solid red; } 
 input[required] { background: #ffecec; } 
 *, ::before, ::after { box-sizing: border-box; }

input {
display: block;
margin: 10px;
padding: 6px;
border: 1px solid #333;
}

Exact Value Selector [attr="value"]

This selector targets elements where the attribute has an exact value match.

Syntax:

[attribute="value"] 

 input[type="text"] { border: 3px solid; } 
 input[type="password"] { border: 3px solid; } 
 *, ::before, ::after { box-sizing: border-box; }

input {
display: block;
margin: 10px 0;
padding: 6px;
border: 1px solid #333;
}

Partial Match Selectors

CSS provides several selectors to match only part of an attribute value.

Starts With Selector ^=

Targets elements where the attribute value starts with a specific string. 

 a[href^="https"] { color: green; } 
 a[href^="http"] { text-decoration: none; } 
 *, ::before, ::after { box-sizing: border-box; }

a {
display: block;
margin: 8px 0;
}

 Secure link Non-secure link Internal link

Ends With Selector $=

Targets elements where the attribute value ends with a specific string. 

 a[href$=".pdf"] { color: red; } 
 a[href$=".jpg"] { color: purple; } 
 *, ::before, ::after { box-sizing: border-box; }

a {
display: block;
margin: 8px 0;
}

 PDF document Image file HTML page

Contains Selector *=

Targets elements where the attribute value contains a specific string anywhere inside it. 

 a[href*="login"] { font-weight: bold; } 
 a[href*="signup"] { text-transform: uppercase; } 
 *, ::before, ::after { box-sizing: border-box; }

a {
display: block;
margin: 8px 0;
}

        Login 
        Sign up 
        About us

Word Match Selector [attr~="value"]

This selector matches a whole word inside a space-separated list of values.

It is commonly used with class-like attributes or tags. 

 div[data-tags~="featured"] { border-color: gold; } 
 div[data-tags~="new"] { background: #eaffea; } 
 *, ::before, ::after { box-sizing: border-box; }

div {
border: 3px solid #333;
padding: 10px;
margin: 10px 0;
}

 
Featured and new
 
New item
 
On sale

Hyphen Match Selector [attr|="value"]

This selector matches exact values or values followed by a hyphen.

It is mostly used for language codes. 

 p[lang|="en"] { color: blue; } 
 p[lang|="fr"] { color: red; } 
 *, ::before, ::after { box-sizing: border-box; }

p {
margin: 6px 0;
}

 
Hello!
 
Howdy!
 
Bonjour!
 
Hola!

Case Sensitivity and the i Flag

By default, attribute selectors are case-sensitive in most contexts. You can add the i flag to make the comparison case-insensitive. 

 a[href$=".pdf" i] { color: red; } 
 *, ::before, ::after { box-sizing: border-box; }

a {
display: block;
margin: 6px 0;
}

 Lowercase Uppercase Other file

Combining CSS Attribute Selectors

You can combine multiple attribute selectors to make very precise selections. 

 input[type="text"][required] { border: 3px solid red; } 
 input[type="password"][required] { border: 3px solid blue; } 
 *, ::before, ::after { box-sizing: border-box; }

input {
display: block;
margin: 10px 0;
padding: 6px;
border: 1px solid #333;
}

CSS Attribute Selectors with Classes and Elements

Attribute selectors can be combined with element names or classes for even more control. 

 button[data-variant="primary"] { background: blue; color: white; } 
 button[data-variant="danger"] { background: red; color: white; } 
 *, ::before, ::after { box-sizing: border-box; }

button {
border: none;
padding: 10px 16px;
margin: 6px;
font-size: 14px;
}

Practical Use Cases

  • Styling external vs internal links
  • Highlighting required form fields
  • Targeting elements with specific data attributes
  • Styling files by type (PDF, images, etc.)
 a[href^="http"] { color: green; } 
 a[href^="/"] { color: blue; } 
 *, ::before, ::after { box-sizing: border-box; }

a {
display: block;
margin: 8px 0;
}

 External link Internal link

Common Pitfalls and Tips

  • Attribute selectors are slightly slower than class selectors, so avoid overusing them in very large documents.
  • Always quote attribute values when possible for clarity.
  • Remember that some attributes may be case-sensitive.
  • Use data-* attributes for custom logic instead of inventing new attributes.

Conclusion

Attribute selectors give you a powerful, flexible way to target elements based on their attributes. Whether you are styling form inputs, detecting file types, or working with data attributes, they let you write cleaner, more semantic CSS.

Once you get comfortable with them, you will find yourself using them regularly—especially when working with modern, component-based interfaces or JavaScript-driven content.