css - Attribute Selectors Part 4: Combining Attribute Selectors
You can combine multiple attribute selectors for more refined targeting.
Syntax:
[attribute1][attribute2] {
/* styles */
}
Examples:
Inputs with Specific Type and Name
[input][name="username"] {
border: 2px solid purple;
}
<input type="text" name="username">
<input type="text" name="password">
<!-- Only the username input gets styled -->
Links with href Containing https and Targeting _blank
[a[href*="https"]][target="_blank"] {
color: green;
}
<a href="https://example.com" target="_blank">External Link</a>
<a href="https://example.com">Regular Link</a>
<!-- Only the first link is styled -->
Images with alt and width Attributes
[img[alt]][width] {
box-shadow: 0 0 5px gray;
}
<img src="image.jpg" alt="Description" ">
<img src="image2.jpg" alt="Description">
<!-- Only the first image gets styled -->
