In the vast universe of web development, thoroughly knowing the tools offered by languages like HTML and CSS is fundamental for every web developer. Among the many features offered by CSS, "attribute selectors" play a crucial role, but are often underestimated. In this article, we will explore in detail what attribute selectors are, how they work and how they can be used to improve the quality and maintainability of our CSS code.
Attribute selectors: What Are They?
Attribute selectors in CSS are a mechanism that allows web developers to select HTML elements based on attributes and their values. This means we can apply styles to specific elements based on the values of their attributes. Let's now see the different forms that attribute selectors can take and how they are used.
[attr]
Identifies elements that have an attribute with name "attr".
<div data-info="content">Text content</div>
<style>
div[data-info] {
color: blue;
}
</style>[attr=value]
Identifies elements that have an attribute with name "attr" whose value is exactly "value".
<a href="#" target="_blank">Link</a>
<style>
a[target="_blank"] {
text-decoration: underline;
}
</style>[attr~=value]
Identifies elements that have an attribute with name "attr" whose value is a list of space-separated words, one of which is exactly "value".
<div class="categories" data-tags="html css javascript">Article</div>
<style>
div[data-tags~="css"] {
background-color: lightgray;
}
</style>[attr|=value]
Identifies elements that have an attribute with name "attr" whose value can be exactly "value" or can start with "value" immediately followed by a hyphen.
<span lang="en-us">Content in American language</span>
<style>
span[lang|="en"] {
font-weight: bold;
}
</style>[attr^=value]
Identifies elements that have an attribute with name "attr" whose value starts with "value".
<input type="email" name="email" placeholder="Email">
<style>
input[name^="em"] {
border: 1px solid gray;
}
</style>[attr$=value]
Identifies elements that have an attribute with name "attr" whose value ends with "value".
<img src="image.jpg" alt="Image">
<style>
img[src$=".jpg"] {
box-shadow: 0px 0px 5px black;
}
</style>[attr*=value]
Identifies elements that have an attribute with name "attr" whose value contains at least one occurrence of "value" within the string.
<input type="text" id="username" name="username" placeholder="Username">
<style>
input[name*="user"] {
background-color: white;
}
</style>[attr operator value i]
Adding an "i" (or "I") before closing makes the value compared without distinguishing between uppercase and lowercase (for characters in the ASCII range).
<button type="button" data-action="submit">Confirm</button>
<style>
button[data-action="SUBMIT" i] {
font-weight: bold;
}
</style>[attr operator value s]
Adding an "s" (or "S") before closing makes the value compared taking into account uppercase and lowercase (for characters in the ASCII range).
WARNING: this attribute is supported only by Firefox, so its use is not recommended.
<div class="tag" data-tag="CSS">Tag</div>
<style>
div[data-tag="CSS" s] {
color: green;
}
</style>These are just some examples of how attribute selectors can be used to select and style HTML elements in a targeted and flexible way.