CSS Advanced 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:

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>

Output

Browser Output

css

The text input field will have a blue border
The email input field will have a green border
The external link will appear in red color
The PDF link will appear in bold text

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

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.

PreviousCSS Combinators NextCSS Pseudo Classes