CSS Basic
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:
[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
<!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
/* 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 bothlang="en-US"
andlang="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 (likelang="en-US"
orlang="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:
Author
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