Imagine you’re at a bookstore looking for a book. You don’t remember the full title, but you know it contains the word “adventure”. Instead of checking every single book, you quickly scan the titles for that keyword. In web design, the Attribute Contains Selector in CSS works similarly. It lets you target elements that contain a specific value within their attributes, making it easier to style elements based on partial matches.
What is the Attribute Contains Selector?
The Attribute Contains Selector is a powerful tool in CSS that targets elements with attributes that contain a specified value. This selector is written using square brackets with an asterisk (*) before the equals sign. It’s perfect for applying styles to elements that include certain text within their attribute values.
Here’s how it looks:
element[attribute*="value"] {
color: blue;
}But the element name isn’t required. You can also use:
[attribute*="value"] {
color: blue;
}This will target any element that has the specified attribute containing the value, regardless of the tag name.
Why Use the Attribute Contains Selector?
- Flexible Targeting: The Attribute Contains Selector allows you to apply styles to elements based on partial matches, providing greater flexibility in your designs.
- Dynamic Styling: Attributes often contain dynamic values, such as URLs or data types. Using the Attribute Contains Selector enables you to create styles that respond to these dynamic changes.
- Clean and Maintainable Code: By targeting elements through partial attribute matches, you can avoid adding extra classes or IDs, keeping your HTML and CSS clean and maintainable.
Practical Examples
Let’s explore some practical examples to see how the Attribute Contains Selector can be used effectively.
Example 1: Styling Links Containing a Specific Word
Want to style all links that contain a specific word in their URL? Here’s how you can do it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Links with Specific Word</title>
<style>
a[href*="adventure"] {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://example.com/adventure">Visit Adventure Site</a>
<a href="https://another.com/story">Visit Another Site</a>
</body>
</html>In this example, the Attribute Contains Selector a[href*="adventure"] styles all anchor tags that have the word “adventure” in their href attribute, making the links red and underlined.
Example 2: Styling Input Fields with Specific Placeholder Text
Use the Attribute Contains Selector to style input fields based on part of their placeholder text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Fields by Placeholder</title>
<style>
input[placeholder*="name"] {
border: 2px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="Enter your name">
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>
</body>
</html>Here, the Attribute Contains Selector input[placeholder*="name"] styles all input fields that have the word “name” in their placeholder attribute, giving them a blue border and padding.
Example 3: Styling Elements with Specific Data Attributes
Use the Attribute Contains Selector to style elements based on partial matches in custom data attributes.
<!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*="admin"] {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div data-role="admin-super">Admin Super</div>
<div data-role="admin-user">Admin User</div>
<div data-role="user">Regular User</div>
</body>
</html>In this example, the Attribute Contains Selector [data-role*="admin"] styles all elements with a data-role attribute containing the word “admin”, giving them a yellow background and bold text.
Example 4: Styling Images with Specific Alt Text
Use the Attribute Contains Selector to style images based on part of their alt attribute values.
<!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.png" alt="Main Logo">
<img src="banner.png" alt="Site Banner">
<img src="logo_small.png" alt="Small Logo">
</body>
</html>Here, the Attribute Contains Selector img[alt*="Logo"] styles all images with an alt attribute containing the word “Logo”, adding a red border.
Conclusion
The Attribute Contains Selector is a flexible and powerful tool in CSS, allowing you to target elements based on partial attribute matches. Whether you’re styling links that contain specific words, input fields with particular placeholder text, or elements with custom data attributes, the Attribute Contains Selector provides a way to create dynamic and precise styles. And remember, you don’t always need to specify the element type; you can simply use [attribute*="value"] to target any element with that attribute containing the value. By mastering this selector, you can create clean, maintainable, and highly responsive designs. So, next time you want to style elements based on partial attribute values, remember the Attribute Contains Selector — your key to flexible and effective styling.
