CSS [attribute|=value] Selector

Posted in CSS Tutorial

Updated on Oct 27, 2024

By Mari Selvan

👁️ 21 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The [attribute|=value] selector in CSS is used to select elements whose specified attribute value is either exactly equal to a given string or starts with the string followed by a hyphen (-).

This selector is commonly used to match elements that have language-related attributes (like lang) or other attributes where values might be composed of a base string and a suffix.

💡 Syntax

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

Syntax

Copied

[attribute|=value] {
    /* CSS properties */
}

attribute is the name of the attribute you want to match.
value is the exact value or the value that starts with the specified string followed by a hyphen.

📝 Example

Here’s an example demonstrating the use of the [attribute|=value] selector:

☠️ 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>
    <p lang="en-US">This paragraph is in American English.</p>
    <p lang="en-GB">This paragraph is in British English.</p>
    <p lang="fr">This paragraph is in French.</p>
</body>
</html>

🎨 CSS

CSS

Copied

/* Select elements with a lang attribute that starts with "en" */
[lang|=en] {
    color: blue;
    font-weight: bold;
}

In this example:

The [lang|=en] selector matches both lang="en-US" and lang="en-GB", applying the styles to paragraphs in English, whether American or British.
The paragraph in French (lang="fr") is not affected by this rule.

💬 Usage Tips

The [attribute|=value] selector is most useful for language attributes (like lang="en-US" or lang="fr"), but it can also be applied to other attributes where values are structured similarly (base string followed by a hyphen).
You can combine this selector with other selectors to create more complex rules. For example, combining it with a class or element selector can further refine your styles.

⚠️ Common Pitfalls

The [attribute|=value] selector only matches if the attribute value is either exactly equal to the provided value or starts with the value followed by a hyphen (-). If the value doesn’t match this pattern, it will not be selected.
This selector is case-sensitive in HTML, so be sure to match the case of attribute values exactly as they appear in your markup.

🎉 Conclusion

The [attribute|=value] selector is a handy tool for matching elements based on attribute values that follow a specific pattern, particularly when dealing with language codes or similarly structured attributes.

By leveraging this selector, you can efficiently apply styles to a wide range of elements that share common attribute value patterns.