Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Basic

CSS [attribute|=value] Selector

Posted in CSS Tutorial
Updated on Sep 22, 2024
By Mari Selvan
πŸ‘οΈ 9 - Views
⏳ 4 mins
πŸ’¬ 0
CSS [attribute|=value] Selector

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
Copy To Clipboard
[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
Copy To Clipboard
<!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
Copy To Clipboard
/* 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.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy