CSS [attribute*=value] Selector

Posted in CSS Tutorial

Updated on Oct 27, 2024

By Mari Selvan

👁️ 7 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The CSS [attribute*=value] selector is used to target elements that contain a specific substring within an attribute value.

This powerful attribute selector allows you to match elements based on partial matches within the attribute, making it particularly useful for styling elements dynamically based on data attributes, class names, or other custom attributes.

💡 Syntax

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

Syntax

Copied

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

In the syntax, element refers to the element type, attribute refers to the attribute you want to target, and value is the substring you are matching within that attribute’s value.

📝 Example

Here is a practical 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/about" class="nav-link">About Us</a>
    <a href="https://example.com/contact" class="nav-link">Contact Us</a>
    <a href="https://example.com/blog" class="nav-link">Blog</a>
</body>
</html>

🎨 CSS

CSS

Copied

/* Target all anchor tags with 'https' in their href attribute */
a[href*="https"] {
    color: blue;
    font-weight: bold;
}

/* Specific styling for URLs containing 'about' */
a[href*="about"] {
    text-decoration: underline;
}

In this example:

The selector a[href*="https"] applies styles to all anchor (<a>) elements with an href attribute containing "https".
The second rule, a[href*="about"], further targets anchor elements whose href contains the substring "about".

💬 Usage Tips

The [attribute*=value] selector is case-sensitive by default, meaning that it distinguishes between uppercase and lowercase letters.
Use this selector when you need to style elements based on part of an attribute value, such as targeting links with specific URLs, images with particular file extensions, or elements with class names that follow a pattern.
It works well with custom data attributes. For example, you can select elements whose data- attributes contain certain values.

⚠️ Common Pitfalls

Performance Considerations: Using attribute selectors with wildcards like *= can lead to performance issues if overused, especially on large DOM structures, as the browser needs to evaluate the substring for every matching element.
Case Sensitivity: Attribute values are case-sensitive, so be mindful of the capitalization in your attribute values when using this selector.
Specificity: The specificity of an attribute selector is relatively low, meaning it can be easily overridden by other, more specific selectors. Make sure to combine it with element or class selectors when needed.

🎉 Conclusion

The CSS [attribute*=value] selector offers a versatile way to target elements based on partial matches within attribute values. This makes it a powerful tool for styling dynamic content, improving your ability to handle complex scenarios where attributes contain specific substrings. When used judiciously, it enhances your control over element styling and enables you to write more flexible, adaptable CSS rules.