Imagine you’re in a library, searching for books from a specific series. Instead of examining each title individually, you quickly scan for those with the series prefix. This method saves time and helps you find exactly what you need. Similarly, in web design, the CSS Attribute Contains Prefix Selector (|=) functions in the same way. It lets you target elements whose attributes start with a particular prefix followed by a hyphen, or that exactly match the prefix alone. In other words, it styles attributes that either start with the specified prefix followed by a hyphen or are exactly equal to the prefix. This selector is invaluable for styling elements based on structured attribute values.
What is the CSS Attribute Contains Prefix Selector?
The Attribute Contains Prefix Selector in CSS targets elements whose attributes either exactly match a specified prefix or begin with it followed by a hyphen (-). This selector is written with square brackets and a pipe (|) before the equals sign. It’s particularly useful for applying styles to elements based on their structured attribute values.
Here’s how the syntax looks:
element[attribute|="value"] {
/* styles go here */
}Or, if you want to apply styles to any element with the specified attribute:
[attribute|="value"] {
/* styles go here */
}This selector will target any element with the specified attribute that matches the prefix exactly or starts with the prefix followed by a hyphen.
Why Use the CSS Attribute Contains Prefix Selector?
- Structured Targeting: This selector is ideal for attributes with a structured format. It lets you style elements based on specific attribute values that follow a predictable pattern.
- Dynamic Styling: Attributes often include structured data, like language codes or data types. The Attribute Contains Prefix Selector helps you apply styles that adapt to these structured values, making your designs more flexible.
- Clean and Maintainable Code: Using this selector helps you avoid adding extra classes or IDs, keeping your HTML and CSS organized and easier to maintain.
Practical Examples
Let’s explore practical examples to see how the CSS Attribute Contains Prefix Selector can be used effectively.
Example 1: Styling Language-Specific Elements
Suppose you want to style all elements that use English language codes. You can use the Attribute Contains Prefix Selector to apply specific styles:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Language Attributes</title>
<style>
p[lang|="en"] {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<p lang="en-US">This is English (US).</p>
<p lang="en-GB">This is English (UK).</p>
<p lang="en">This is English.</p>
<p lang="fr-FR">This is French.</p>
</body>
</html>In this example, the selector p[lang|="en"] targets all <p> elements where the lang attribute starts with en- or exactly matches en, styling them with green, bold text. This is useful for applying consistent styles to different variations of English.
Example 2: Targeting Data-Attributes in Forms
If you have form inputs with structured data attributes and want to style them based on a prefix:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Attributes</title>
<style>
[data-role|="user"] {
border: 2px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<input type="text" data-role="user-admin" placeholder="Admin User">
<input type="text" data-role="user-guest" placeholder="Guest User">
<input type="text" data-role="user" placeholder="User">
<input type="text" data-role="admin" placeholder="Admin">
</body>
</html>Here, [data-role|="user"] styles all input fields with a data-role attribute starting with user- or exactly user, applying a blue border and padding. This highlights user-related inputs effectively.
Example 3: Customizing Images with Specific Alt Text
To style images based on the prefix of their alt attributes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Images by Alt Text</title>
<style>
img[alt|="logo"] {
border: 3px solid red;
}
</style>
</head>
<body>
<img src="logo_main.png" alt="logo-main">
<img src="logo.png" alt="logo">
<img src="banner.png" alt="banner">
<img src="logo_small.png" alt="logo-small">
</body>
</html>Here, img[alt|="logo"] styles images where the alt attribute starts with logo- or exactly matches logo, adding a red border. This makes it easy to highlight images with specific alt text prefixes.
Conclusion
The CSS Attribute Contains Prefix Selector (|=) is a powerful tool for applying precise and structured styles based on attribute values. Whether you’re targeting language codes, data attributes, or image alt text, this selector provides a way to create clean, responsive designs. By using this selector effectively, you can enhance your styles and keep your code organized. So next time you need to style elements based on attribute prefixes, remember the Attribute Contains Prefix Selector—it’s your key to efficient and effective styling.
