Imagine you’re at a concert, and you want to find all your friends wearing a specific band’s T-shirt. Instead of checking every person, you quickly scan for shirts with that band’s name. In web design, the Attribute Contains Word Selector in CSS works similarly. It lets you target elements that have an attribute containing a specific word, making it easy to style elements based on a single word within their attribute values.
What is the Attribute Contains Word Selector?
The Attribute Contains Word Selector is a powerful tool in CSS that targets elements with attributes containing a specified word. This selector is written using square brackets with a tilde (~) before the equals sign. It’s perfect for applying styles to elements that include certain words 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 as a word, regardless of the tag name.
Why Use the Attribute Contains Word Selector?
- Precise Targeting: The Attribute Contains Word Selector allows you to apply styles to elements that match a specific word within an attribute value, providing precision in your designs.
- Dynamic Styling: Attributes often contain multiple words or phrases. Using the Attribute Contains Word Selector enables you to create styles that respond to these multi-word attributes.
- Clean and Maintainable Code: By targeting elements through specific words in their attributes, 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 Word Selector can be used effectively.
Example 1: Styling Elements with Class Names
Want to style all elements that have a specific word in their class names? 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>Elements with Specific Class Names</title>
<style>
[class~="highlight"] {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p class="highlight important">This paragraph is highlighted and important.</p>
<p class="note highlight">This note is also highlighted.</p>
<p class="normal">This paragraph is normal.</p>
</body>
</html>In this example, the Attribute Contains Word Selector [class~="highlight"] styles all elements with a class name containing the word “highlight”, making the background yellow and the text bold.
Example 2: Styling Input Fields with Specific Placeholder Words
Use the Attribute Contains Word Selector to style input fields based on a word in 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 green;
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 Word Selector input[placeholder~="name"] styles all input fields that have the word “name” in their placeholder attribute, giving them a green border and padding.
Example 3: Styling Images with Specific Alt Text Words
Use the Attribute Contains Word Selector to style images based on a word in 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~="icon"] {
border: 3px solid blue;
}
</style>
</head>
<body>
<img src="logo.png" alt="company logo">
<img src="icon.png" alt="menu icon">
<img src="banner.png" alt="site banner">
</body>
</html>Here, the Attribute Contains Word Selector img[alt~="icon"] styles all images with an alt attribute containing the word “icon”, adding a blue border.
Conclusion
The Attribute Contains Word Selector is a precise and versatile tool in CSS, allowing you to target elements based on a word within attribute values. Whether you’re styling elements with specific class names, input fields with particular placeholder text, or links with certain URL parts, the Attribute Contains Word 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 word. By mastering this selector, you can create clean, maintainable, and highly responsive designs. So, next time you want to style elements based on a word within their attribute values, remember the Attribute Contains Word Selector — your key to precise and effective styling.
