CSS [attribute~=value] Selector

Posted in CSS Tutorial

Updated on Sep 22, 2024

By Mari Selvan

👁️ 6 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

The CSS [attribute~=value] selector allows you to select elements with an attribute containing a specific value within a space-separated list.

This selector is commonly used to target elements with multiple class names or specific attributes like rel, alt, or class where one of the values matches the given string.

💡 Syntax

The signature of the [attribute~=value] Selector is as follows:

Syntax

Copied

[attribute~=value] {
    /* CSS properties */
}

attribute: The attribute you want to target (e.g., class, rel, alt).
value: A specific value that must match within the space-separated attribute values.

📝 Example

Here is an example of how to use the [attribute~=value] selector in CSS:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS [attribute~=value] Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p class="intro lead">Welcome to the site!</p>
    <p class="intro highlight">This paragraph is important.</p>
    <p class="lead">Another lead paragraph.</p>
    <p class="highlight">Another highlighted paragraph.</p>
</body>
</html>

🎨 CSS

CSS

Copied

/* Select all elements with the class 'intro' and any class list containing 'lead' */
[class~=lead] {
    background-color: lightblue;
    font-weight: bold;
}

In this example:

The second and third <p> elements, which have a class list that includes "lead", are selected and styled with a light blue background and bold text.
The selector [class~=lead] ensures that the elements have the word "lead" within their class attribute.

💬 Usage Tips

The [attribute~=value] selector is best used when dealing with attributes containing multiple space-separated values, such as class, rel, or alt.
It is case-sensitive in most browsers, so ensure that the value matches exactly, including capitalization.
Useful for targeting elements with multiple classes, such as when you're using utility or modifier classes in frameworks like Bootstrap or Tailwind CSS.

⚠️ Common Pitfalls

Case Sensitivity: The selector is case-sensitive, so if the attribute values use mixed case, ensure your selector matches exactly. For example, [class~=Intro] will not match class="intro lead".
No Partial Matches: The selector only matches whole words within the attribute. For instance, [class~=le] will not match class="lead", as le is not a complete word in the class attribute.
Applies Only to Space-Separated Values: This selector only works for attributes with space-separated values, such as class. It will not work for attributes with comma-separated or other types of lists.

🎉 Conclusion

The [attribute~=value] selector is a powerful way to apply styles based on space-separated attribute values, especially when dealing with classes or other attributes that hold multiple values. It provides flexibility in styling elements that share specific values in their attribute lists, enabling more efficient CSS code.

By using this selector, you can easily target elements based on partial attribute matches, helping you build more modular and reusable styles.