CSS Select Attribute Contains Specific Word

In this tutorial, you will learn how to select elements with attributes containing specific words in CSS!

To begin, let's first understand what an attribute is in CSS. An attribute is a characteristic or property of an HTML element. For example, the "href" attribute in an anchor tag (<a>) determines the link destination, and the "src" attribute in an image tag (<img>) determines the source of the image.

Now, let's move on to selecting elements with attributes containing specific words in CSS. This can be useful when you want to apply a style to multiple elements that share a common attribute value.

To do this, we can use the attribute selector, which is represented by square brackets ([]). Inside the brackets, we can specify the attribute we want to select, followed by a word or phrase that we want to match.

CSS Select Attribute Contains Specific Word Examples

Here's an example:

[href*="example"] {
   color: red;
}

In this example, we are selecting all elements that have an "href" attribute that contains the word "example". This means that any element with an "href" attribute that has the word "example" in it will be affected by the styles inside the curly braces.

For instance, let's say we have the following HTML:

<a href="https://www.example.com">Example</a>
<a href="https://www.not.com">Not Example</a>
<a href="https://www.example.net">Example</a>

Using the attribute selector above, the first and third anchor tags will be affected by the styles because they have an "href" attribute that contains the word "example". The second anchor tag will not be affected because its "href" attribute does not contain the word "example". Below is the output:

See the Pen CSS Select attribute with specific words by Vinish Kapoor (@foxinfotech) on CodePen.

Now, let's say we want to select elements with an attribute that ends with a specific word. To do this, we can use the "$" symbol at the end of the word or phrase we want to match.

For example:

[href$=".com"] {
  color: green;
}

In this example, we are selecting all elements that have an "href" attribute that ends with the word ".com". This means that any element with an "href" attribute that ends with ".com" will be affected by the styles inside the curly braces.

Using the same HTML as before, only the first anchor tag will be affected by the styles because its "href" attribute ends with ".com". The second and third anchor tags will not be affected because their "href" attributes do not end with ".com". Below is the output:

See the Pen CSS for href .com by Vinish Kapoor (@foxinfotech) on CodePen.

Here is another example, which selects the Paragraphs having "description" word in the attributes.

1. First, let's define some HTML elements that we will be styling:

<div class="container">
  <p data-description="description-1">This is a paragraph with a data attribute.</p>
  <p data-description="description-2">This is another paragraph with a data attribute.</p>
  <p data-description="line-3">This is another paragraph with a data attribute.</p>
</div>

2. Next, we will create a CSS rule that selects an element with a specific attribute containing a specific word. To do this, we will use the [attribute*=value] attribute selector. This selector will match any element whose attribute contains the specified value.

For example, to select all p elements with a data-description attribute containing the word "description", we would use the following rule:

p[data-description*="description"] {
  color: red;
}

This rule will apply the color red to any p element whose data-description attribute contains the word "description". Below is the output:

See the Pen CSS Attribute Select with word by Vinish Kapoor (@foxinfotech) on CodePen.