html

CSS Attribute Selectors

There are a variety of ways through which you can style HTML elements. One such easy and powerful approach is using the CSS attribute selectors. These selectors allow you to style elements having some attributes or attribute values. These selectors are as follows.

  1. [attribute] Selector
  2. [attribute=“value”] Selector
  3. [attribute~=“value”] Selector
  4. [attribute |=“value”] Selector
  5. [attribute^= “value”] Selector
  6. [attribute$= “value”] Selector
  7. [attribute*= “value”] Selector

Each of these are explained in detail below.

[attribute] Selector

For the purpose of styling elements that have a particular attribute, the [attribute] selector is used.

Syntax

element [attribute] {

property: value;

}

Or,

[attribute] {

property: value;

}

Example

Let’s say you want to style all elements having attribute alt, then use the [attribute] selector in the following way.

HTML

<h1 class="heading">This is a heading</h1>

<p alt="paragraph">This is a paragraph.</p>

In the above code, we have created two elements <h1> and <p>. The <h1> have been assigned an attribute class, whereas, the <p> element has been assigned an attribute alt.

CSS

[alt] {

font-style: italic;

}

Now, using the [attribute] selector we are styling only those elements with the attribute alt. In this case, since only the <p> element has the alt attribute, therefore, the style rule will be applied only on the paragraph.

Output

Elements with alt attribute have been styled.

[attribute=“value”] Selector

Atttibutes have some value, therefore, in order to style an element having a certain attribute and value, we use the [attribute=“value”] selector.

Syntax

element [attribute="value"] {

property: value;

}

Or,

[attribute="value"] {

property: value;

}

Example

Suppose you want to style some elements having a particular attribute and value. Follow the example below.

HTML

<input type="text" class= "input"><br><br>

<button class= "btn">Submit</button>

Here we have created an input field, as well as a button. Both the elements have an attribute by the name class, however, values of both the class attributes are different.

CSS

[class = "input"] {

background-color: pink;

font-size: 20px;

}

[class = "btn"] {

padding: 3px;

border: 1px solid black;

}

In the above code, we are using the [attribute=“value”] selector to style both the input field as well as the button.

Output

Both the elements have been style successfully.

[attribute~=“value”] Selector

There are certain attributes that have a list of values separated by space, for instance, class=“hello world”. Now in order to style elements with such attribute values, the [attribute~=“value”] selector is used. It styles elements whose attribute value match one of these values.

Syntax

element [attribute~="value"] {

property: value;

}

Or,

[attribute~="value"] {

property: value;

}

Example

The example below demonstrates the working of the selector under discussion.

HTML

<h1 class="head">This is a heading</h1>

<p class ="para p1">This is a paragraph.</p>

<p class ="para p2">This is another paragraph.</p>

In the above code, we have defined three elements. Each of these elements have the same attribute, however, different values.

CSS

[class~="head"] {

color: purple;

}

[class~="para"] {

font-size: 20px;

font-style: italic;

}

Using the [attribute~=“value”] selector, we are styling the heading and paragraphs. As you can see that the attribute value of each <p> element is a list of values separated by space, however, the keyword “para” exists in both the values, therefore, the style rules defined for the attribute value “para” will be applied to both the paragraphs.

Output

The [attribute~=“value”] selector is working properly.

[attribute |=“value”] Selector

For the purpose of styling elements with attributes having values that are separated by hyphen, the [attribute |=“value”] selector is used.

Syntax

element [attribute|="value"] {

property: value;

}

Or,

[attribute |="value"] {

property: value;

}

Example

Follow the below-mentioned example to understand the working of the [attribute |=“value”] selector.

HTML

<h1 class="linux-hint">This is a heading</h1>

<p Class ="linux-hint">This is a paragraph.</p>

<p class ="linuxhint">This is another paragraph.</p>

The <h1> and the first <p> element has an attribute value separated by hyphen, however, the attribute value of the last <p> element is not separated by a hyphen.

CSS

[class |="linux"] {

background-color: bisque;

font-style: italic;

}

Now, this selector will only apply style rules to the heading and the first paragraph because only these two elements have an attribute value that is separated by a hyphen.

Output

The style rules have been applied to <h1> and the first <p> element.

[attribute^= “value”] Selector

In order to style elements with attributes having a specific starting value, the [attribute^=“value”] selector. The value is not necessarily the whole word.

Syntax

element [attribute^="value"] {

property: value;

}

Or,

[attribute^="value"] {

property: value;

}

Example

We are going to use the same example used in the above section to clear the concept of the [attribute^=“value”] selector.

HTML

<h1 class="linux-hint">This is a heading</h1>

<p Class ="linux-hint">This is a paragraph.</p>

<p class ="linuxhint">This is another paragraph.</p>

Note that each of the elements above have an attribute value starting with the word linux.

CSS

[class ^="linux"] {

background-color: bisque;

font-style: italic;

}

Now this selector will style all of the elements because each of them has the same starting attribute value.

Output

The [attribute ^= “value”] selector is working properly.

[attribute$= “value”] Selector

In order to style elements with attributes having a particular ending value, the [attribute$=“value”] selector. The value is not necessarily the whole word.

Syntax

element [attribute $="value"] {

property: value;

}

Or,

[attribute $="value"] {

property: value;

}

Example

Follow the example below to understand the working of this attribute selector.

HTML

<div class="first_div">Some text.</div>

<div class="second_div">Some text.</div>

<div class="demo">Some text.</div>

Here we have created three div elements. The first two div elements have been assigned an attribute value ending with the keyword “div”.

CSS

[class $="div"] {

background-color: beige;

padding: 10px;

font-size: 20px;

font-style: italic;

}

The [attribute $=“value”] will apply the above style rules to the first two div elements only.

Output

The first two div elements have been styled using the [attribute $=“value] selector.

[attribute*= “value”] Selector

For the purpose of styling all the elements with attribute values having a specific keyword, the [attribute *= “value”] selector is used.

Syntax

element [attribute *="value"] {

property: value;

}

Or,

[attribute *="value"] {

property: value;

}

Example

Suppose you want to style some elements using the [attribute*=“value”] selector. Follow the code below.

HTML

<p class="para1">This is a paragraph.</div>

<p class="para2">This is another paragraph.</div>

We have created two <p> elements having attribute values “para1” and “para2” respectively.

CSS

[class *="ar"] {

background-color: bisque;

font-style: italic;

}

This attribute selector will detect any attribute value with the keyword “ar” and apply the above style rules on that element.

Output

The [attribute*=“value”] selector is working properly.

Conclusion

You can style HTML elements that have certain attributes or attribute values. There are a total of seven CSS attribute selectors which are: [attribute] selector, [attribute= “value”], [attribute ~=“value”] selector, [attribute |=“value”] selector, [attribute ^=“value”] selector, [attribute $=“value] selector, and [attribute *=“value”] selector. These all selectors serve a different purpose which we have discussed in detail in this post along with relevant examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.