css - Attribute Selectors Part 5: Practical Use Cases
Attribute selectors shine in real-world scenarios, such as form validation, link targeting, and image styling.
Examples:
Highlight Required Fields
[input:required] {
border: 2px solid red;
}
<input type="text" required>
<input type="password">
<!-- Only the required input is styled -->
Style External Links
[a[href^="http"]] {
color: blue;
}
<a href="http://example.com">External</a>
<a href="/internal">Internal</a>
<!-- Only the external link is styled -->
Validate Email Fields
[input[type="email"]] {
background-color: lightyellow;
}
<input type="email" placeholder="Enter your email">
<input type="text" placeholder="Enter your name">
<!-- Only the email field is highlighted -->
Responsive Images
[img[src$=".jpg"]] {
max-width: 100%;
height: auto;
}
<img src="image.jpg">
<img src="image.png">
<!-- Only .jpg images are styled -->
Conclusion
CSS Attribute Selectors empower developers to create precise, efficient, and scalable styles for dynamic web content. By mastering basic syntax, substring matching, and combining selectors, you can craft targeted designs and improve code readability without excessive reliance on classes or IDs.
