Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS [attribute~=value] Selector

Posted in CSS Tutorial
Updated on Nov 29, 2024
By Mari Selvan
👁️ 18 - Views
⏳ 4 mins
💬 1 Comment
CSS [attribute~=value] Selector

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
Copy To Clipboard
[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
Copy To Clipboard
<!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
Copy To Clipboard
/* 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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy