CSS [attribute=value] Selector

Posted in CSS Tutorial

Updated on Oct 27, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The CSS [attribute=value] selector is used to select elements with a specific attribute value.

This allows for more precise styling by targeting elements based on their attribute values, making it a highly flexible tool for customizing the appearance of specific elements in a web page.

💡 Syntax

The signature of the [attribute=value] Selector is as follows:

Syntax

Copied

[element[attribute="value"]] {
    /* CSS properties */
}

element: The HTML tag you want to target.
attribute: The attribute you are checking for.
value: The specific value of the attribute.

This selector only selects elements where the attribute has an exact match with the specified value.

📝 Example

Here is an example of how to use the [attribute=value] selector in CSS:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS [attribute=value] Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <a href="https://example.com" target="_blank">Visit Example</a>
    <a href="https://example.com" target="_self">Open Example Here</a>
    <button type="submit">Submit</button>
    <button type="button">Click Me</button>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for links that open in a new tab */
a[target="_blank"] {
    color: red;
    text-decoration: underline;
}

/* Style for buttons of type "submit" */
button[type="submit"] {
    background-color: green;
    color: white;
    border: 1px solid green;
}

/* Style for buttons of type "button" */
button[type="button"] {
    background-color: blue;
    color: white;
    border: 1px solid blue;
}

In this example:

Links (<a>) with the target="_blank" attribute are styled with red text and underlined.
Buttons with the type="submit" attribute have a green background and white text.
Buttons with the type="button" attribute have a blue background and white text.

💬 Usage Tips

Use the [attribute=value] selector to precisely style elements based on attributes like href, target, type, class, and id.
Combine the [attribute=value] selector with other selectors like classes and pseudo-classes to fine-tune your styling.
For example:
CSS
Copied
```
input[type="text"]:focus {
    border-color: blue;
}
```

⚠️ Common Pitfalls

The [attribute=value] selector only matches exact values. For instance, [type="button"] won't match an element if the type is set to something like button-primary.
If you want to select elements with a partial match (e.g., values that start or contain a certain string), use the other attribute selectors like [attribute^="value"] (starts with) or [attribute*="value"] (contains).

🎉 Conclusion

The CSS [attribute=value] selector offers powerful control over styling by targeting elements based on their attributes. This selector is incredibly useful when working with form elements, links, and other attributes-driven HTML elements.

By mastering this selector, you can create more precise, maintainable styles for complex web pages.