Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Selectors

CSS Attribute Selectors

Written by Updated

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

SelectorDescriptionExample
[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 selectors11213

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

SelectorMatches
[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.

PreviousCSS CombinatorsNextCSS Pseudo Classes