CSS Selectors
CSS Attribute Selectors
CSS Attribute Selectors are used to select HTML elements based on their attributes or attribute values.
Instead of selecting elements by tag name, class, or ID, you can target elements using attributes such as: The supporting concepts are explained in CSS Class Selector and CSS Pseudo Classes.
- href
- type
- title
- target
- alt
Attribute selectors are especially useful when styling forms, links, and dynamically generated content.
Syntax
Select Elements with a Specific Attribute
Specific Attribute Syntax
css
[attribute] {
property: value;
}Specific Attribute Example
css
[target] {
color: red;
}Selects all elements that have a target attribute.
Select Elements with a Specific Attribute Value
Attribute Value Syntax
css
[attribute="value"] {
property: value;
}Attribute Value Example
css
input[type="text"] {
border: 2px solid blue;
}Selects only text input fields.
Attributes
| Selector | Description | Example |
|---|---|---|
| [attribute] | Has the attribute | [target] |
| [attribute="value"] | Exact value match | [type="text"] |
| [attribute^="value"] | Starts with value | [href^="https"] |
| [attribute$="value"] | Ends with value | [href$=".pdf"] |
| [attribute*="value"] | Contains value | [title*="css"] |
Example
CSS Attribute Selectors Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Attribute Selectors Example</title>
<style>
input[type="text"] {
border: 2px solid blue;
padding: 8px;
}
input[type="email"] {
border: 2px solid green;
padding: 8px;
}
a[target="_blank"] {
color: red;
}
a[href$=".pdf"] {
font-weight: bold;
}
</style>
</head>
<body>
<input type="text" placeholder="Text Field">
<br><br>
<input type="email" placeholder="Email Field">
<br><br>
<a href="https://example.com" target="_blank">
Open External Website
</a>
<br><br>
<a href="guide.pdf">
Download PDF Guide
</a>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| Attribute selectors | 1 | 12 | 1 | 3 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- Attribute selectors help target elements without adding extra classes.
- They are commonly used in forms and links.
- Multiple attribute selectors can be combined.
Example:
Combined Attribute Selector Example
css
input[type="text"][required] {
border-color: red;
}Common Attribute Selector Examples
| Selector | Matches |
|---|---|
| [href] | Elements with href attribute |
| [type="email"] | Email input fields |
| [target="_blank"] | External links |
| [href^="https"] | Secure links |
| [href$=".pdf"] | PDF links |
Conclusion
CSS Attribute Selectors provide a powerful way to target elements based on their attributes and values. They help create more flexible and maintainable stylesheets while reducing the need for additional classes and IDs.