Attribute Selectors in CSS – What Is a CSS Attribute Selector?

An attribute selector selects an HTML element based on the element's attribute name or value.

The two (2) types of CSS attribute selectors are:

• Presence and value attribute selectors
• Substring matching attribute selectors

Let's discuss the two attribute selectors below.

Presence and Value Attribute Selectors

A presence and value attribute selector selects an HTML element if the element meets either of the following conditions:

• It has a specified attribute
• Its attribute's value matches a specified condition

The four (4) types of CSS presence and value attribute selectors are:

• [attribute] presence and value attribute selector
• [attribute=value] presence and value attribute selector
• [attribute~=value] presence and value attribute selector
• [attribute|=value] presence and value attribute selector

Let's discuss the four presence and value attribute selectors below.

[attribute] presence and value attribute selector

A CSS [attribute] selector selects all HTML elements with the specified attribute—irrespective of the attribute's value.

Syntax of the [attribute] selector

Here is the syntax of a CSS [attribute] selector:

[attribute] { style declarations }

Example 1: Apply DeepPink to all <h2> elements with a lang attribute

The [attribute] selector below selects all <h2> elements with a lang attribute.

h2[lang] {
  color: DeepPink;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, DeepPink will get applied only to the <h2> element with a lang attribute.

<h1>Hello there! 👋 I am Heading 1</h1>
<p>First paragraph immediately after heading 1</p>
<h2 lang="en-us">Heading 2 is my name</h2>
<p>Second paragraph immediately after heading 2</p>
<p>Third paragraph</p>
<h2>Heading 2 is my name</h2>
<p>Fourth paragraph</p>

Try Editing It

Example 2: Apply red to all the paragraphs with a lang attribute

The [attribute] selector below selects all <p> elements with a lang attribute.

p[lang] {
  color: red;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied only to the <p> elements with a lang attribute.

<section>
  <div>Div 1 directly inside a section 1</div>
</section>
<section>
  <p>Paragraph 1 directly inside section 2</p>
  <p>Paragraph 2 directly inside section 2</p>
</section>
<section>
  <div>Div 2 directly inside section 3</div>
  <p lang="en-us">Paragraph 3 directly inside a section 3</p>
  <p lang="hi">अनुच्छेद 4 सीधे एक खंड 3 . के अंदर</p>
  <p lang="zh-Hans">第 5 段直接在第 3 段内</p>
</section>
<section>
  <div>Div 3 directly inside section 4</div>
</section>
<p>Paragraph 6 directly inside the document's body element</p>

Try Editing It

[attribute=value] presence and value attribute selector

A CSS [attribute=value] selector selects all HTML elements whose attribute's value exactly matches the specified value.

Syntax of the [attribute=value] selector

Here is the syntax of a CSS [attribute=value] selector:

[attribute=value] { style declarations }

Example 1: Apply DeepPink to all the paragraphs with a lang="en-gb" attribute

The [attribute=value] selector below selects all <p> elements with a lang="en-gb" attribute.

p[lang="en-gb"] {
  color: DeepPink;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, DeepPink will get applied only to the <p> element with a lang="en-gb" attribute.

<h1>Hello there! 👋 I am Heading 1</h1>
<p lang="en-us">First paragraph immediately after heading 1</p>
<h2>Heading 2 is my name</h2>
<p lang="en-gb">Second paragraph immediately after heading 2</p>
<p lang="en-us">Third paragraph</p>
<h2>Heading 2 is my name</h2>
<p lang="en-us">Fourth paragraph</p>

Try Editing It

Example 2: Apply red to all the paragraphs with a lang="hi" attribute

The [attribute=value] selector below selects all <p> elements with a lang="hi" attribute.

p[lang="hi"] {
  color: red;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied only to the <p> elements with a lang="hi" attribute.

<section>
  <div>Div 1 directly inside a section 1</div>
</section>
<section>
  <p>Paragraph 1 directly inside section 2</p>
  <p lang="hi">पैराग्राफ 2 सीधे सेक्शन 2 . के अंदर</p>
</section>
<section>
  <div>Div 2 directly inside section 3</div>
  <p lang="en-us">Paragraph 3 directly inside a section 3</p>
  <p lang="hi">अनुच्छेद 4 सीधे एक खंड 3 . के अंदर</p>
  <p lang="zh-Hans">第 5 段直接在第 3 段内</p>
</section>
<section>
  <div>Div 3 directly inside section 4</div>
</section>
<p>Paragraph 6 directly inside the document's body element</p>

Try Editing It

[attribute~=value] presence and value attribute selector

A CSS [attribute~=value] selector selects all HTML elements whose attribute's value meets either of the following conditions:

• It exactly matches the specified value.
• It contains the specified value as one of its space-separated lists of words.

Syntax of the [attribute~=value] selector

Here is the syntax of a CSS [attribute~=value] selector:

[attribute~=value] { style declarations }

Example 1: Apply DeepPink to all the paragraphs whose lang attribute contains an "en-us" value

The [attribute~=value] selector below selects all <p> elements whose lang attribute has an "en-us" value.

p[lang~="en-us"] {
  color: DeepPink;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, DeepPink will get applied only to the <p> elements whose lang attribute contains an "en-us" value.

<h1>Hello there! 👋 I am Heading 1</h1>
<p lang="en-gb en-us">First paragraph immediately after heading 1</p>
<h2>Heading 2 is my name</h2>
<p lang="en-gb">Second paragraph immediately after heading 2</p>
<p lang="en-us">Third paragraph</p>
<h2>Heading 2 is my name</h2>
<p lang="en-us en-gb">Fourth paragraph</p>

Try Editing It

Example 2: Apply red to all the sections whose lang attribute contains a "zh-Hans" value

The [attribute~=value] selector below selects all <section> elements whose lang attribute has a "zh-Hans" value.

section[lang~="zh-Hans"] {
  color: red;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied only to the <section> elements whose lang attribute contains a "zh-Hans" value.

<section lang="en-us">
  <div>Div 1 directly inside a section 1</div>
</section>
<section lang="en-us hi">
  <p>Paragraph 1 directly inside section 2</p>
  <p>पैराग्राफ 2 सीधे सेक्शन 2 . के अंदर</p>
</section>
<section lang="en-us hi zh-Hans">
  <div>Div 2 directly inside section 3</div>
  <p>Paragraph 3 directly inside section 3</p>
  <p>अनुच्छेद 4 सीधे एक खंड 3 . के अंदर</p>
  <p>第 5 段直接在第 3 段内</p>
</section>
<section lang="en-gb">
  <div>Div 3 directly inside section 4</div>
</section>
<p>Paragraph 6 directly inside the document's body element</p>

Try Editing It

[attribute|=value] presence and value attribute selector

A CSS [attribute|=value] selector selects all HTML elements whose attribute's value meets either of the following conditions:

• It exactly matches the specified value.
• It starts with the specified value and a hyphen (-).

Syntax of the [attribute|=value] selector

Here is the syntax of a CSS [attribute|=value] selector:

[attribute|=value] { style declarations }

Example 1: Apply DeepPink to all the paragraphs whose lang attribute's value is "en" or begins with "en-"

The [attribute|=value] selector below selects all <p> elements whose lang attribute's value is exactly "en" or starts with "en-".

p[lang|="en"] {
  color: DeepPink;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, DeepPink will get applied only to the <p> elements whose lang attribute's value is exactly "en" or starts with "en-".

<h1>Hello there! 👋 I am Heading 1</h1>
<p lang="en">First paragraph immediately after heading 1</p>
<h2>Heading 2 is my name</h2>
<p lang="engb">Second paragraph immediately after heading 2</p>
<p lang="en-us">Third paragraph</p>
<h2>Heading 2 is my name</h2>
<p lang="en-gb">Fourth paragraph</p>

Try Editing It

Example 2: Apply red to all the sections whose lang attribute's value is "zh" or begins with "zh-"

The [attribute|=value] selector below selects all <section> elements whose lang attribute's value is exactly "zh" or starts with "zh-".

section[lang|="zh"] {
  color: red;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied only to the <section> elements whose lang attribute's value is exactly "zh" or starts with "zh-".

<section>
  <div lang="zh">Div 1 直接在第 1 節內</div>
</section>
<section lang="en-us hi">
  <p>Paragraph 1 directly inside section 2</p>
  <p>पैराग्राफ 2 सीधे सेक्शन 2 . के अंदर</p>
</section>
<section lang="en-us hi zhHans">
  <div>Div 2 directly inside section 3</div>
  <p>Paragraph 3 directly inside section 3</p>
  <p>अनुच्छेद 4 सीधे एक खंड 3 . के अंदर</p>
  <p>第 5 段直接在第 3 段内</p>
</section>
<section lang="zh-Hans">
  <div>第 3 部分直接在第 4 部分内</div>
</section>
<p>Paragraph 6 directly inside the document's body element</p>

Try Editing It

Substring Matching Attribute Selectors

A substring matching attribute selector selects all HTML elements whose attribute's value meets either of the following conditions:

• It starts with a specified value
• It ends with a specified value
• It contains at least one occurrence of the specified value—regardless of its location

note

Substring means part of a string. For instance, "Cat" is a substring of "Caterpillar" because "Cat" is part of the "Caterpillar" string.

The three (3) types of CSS substring matching attribute selectors are:

• [attribute^=value] substring matching attribute selector
• [attribute$=value] substring matching attribute selector
• [attribute*=value] substring matching attribute selector

Let's discuss the three substring matching attribute selectors below.

[attribute^=value] substring matching attribute selector

A CSS [attribute^=value] selector selects all HTML elements whose attribute's value begins with the specified value.

Syntax of the [attribute^=value] selector

Here is the syntax of a CSS [attribute^=value] selector:

[attribute^=value] { style declarations }

Example 1: Apply DeepPink to all the paragraphs whose class attribute begins with a "cod" value

The [attribute^=value] selector below selects all <p> elements whose class attribute starts with a "cod" value.

p[class^="cod"] {
  color: DeepPink;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, DeepPink will get applied only to the <p> elements whose class attribute begins with a "cod" value.

<h1>Hello there! 👋 I am Heading 1</h1>
<p class="codesweetly">First paragraph immediately after heading 1</p>
<h2>Heading 2 is my name</h2>
<p class="code-sweetly">Second paragraph immediately after heading 2</p>
<p class="co-de-sweetly">Third paragraph</p>
<h2>Heading 2 is my name</h2>
<p class="CODESWEETLY">Fourth paragraph</p>

Try Editing It

CodeSweetly TIP

You can do a case-insensitive match of an attribute's value by placing the letter i before the closing bracket like so:

p[class^="cod" i] {
  color: DeepPink;
}

Example 2: Apply red to all the paragraphs whose class attribute begins with a case-insensitive "f" value

The [attribute^=value] selector below selects all <p> elements whose class attribute starts with a case-insensitive "f" value.

p[class^="f" i] {
  color: red;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied only to the <p> elements whose class attribute begins with a case-insensitive "f" value.

<section>
  <div>Div 1 directly inside a section 1</div>
</section>
<section>
  <p class="first-p">Paragraph 1 directly inside section 2</p>
  <p>Paragraph 2 directly inside section 2</p>
</section>
<section>
  <div>Div 2 directly inside section 3</div>
  <p class="FIRST-p">Paragraph 3 directly inside a section 3</p>
  <p>Paragraph 4 directly inside a section 3</p>
  <p>Paragraph 5 directly inside a section 3</p>
</section>
<section>
  <div>Div 3 directly inside section 4</div>
</section>
<p>Paragraph 6 directly inside the document's body element</p>

Try Editing It

[attribute$=value] substring matching attribute selector

A CSS [attribute$=value] selector selects all HTML elements whose attribute's value ends with the specified value.

Syntax of the [attribute$=value] selector

Here is the syntax of a CSS [attribute$=value] selector:

[attribute$=value] { style declarations }

Example 1: Apply DeepPink to all the paragraphs whose class attribute ends with a "-sweetly" value

The [attribute$=value] selector below selects all <p> elements whose class attribute ends with a "-sweetly" value.

p[class$="-sweetly"] {
  color: DeepPink;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, DeepPink will get applied only to the <p> elements whose class attribute ends with a "-sweetly" value.

<h1>Hello there! 👋 I am Heading 1</h1>
<p class="codesweetly">First paragraph immediately after heading 1</p>
<h2>Heading 2 is my name</h2>
<p class="code-sweetly">Second paragraph immediately after heading 2</p>
<p class="co-de-sweETly">Third paragraph</p>
<h2>Heading 2 is my name</h2>
<p class="CODESWEETLY">Fourth paragraph</p>

Try Editing It

CodeSweetly TIP

You can do a case-insensitive match of an attribute's value by placing the letter i before the closing bracket like so:

p[class$="-sweetly" i] {
  color: DeepPink;
}

Example 2: Apply red to all the paragraphs whose class attribute ends with a case-insensitive "st-p" value

The [attribute$=value] selector below selects all <p> elements whose class attribute ends with a case-insensitive "st-p" value.

p[class$="st-p" i] {
  color: red;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied only to the <p> elements whose class attribute ends with a case-insensitive "st-p" value.

<section>
  <div>Div 1 directly inside a section 1</div>
</section>
<section>
  <p class="first-p">Paragraph 1 directly inside section 2</p>
  <p>Paragraph 2 directly inside section 2</p>
</section>
<section>
  <div>Div 2 directly inside section 3</div>
  <p class="FIRST-p">Paragraph 3 directly inside a section 3</p>
  <p>Paragraph 4 directly inside a section 3</p>
  <p>Paragraph 5 directly inside a section 3</p>
</section>
<section>
  <div>Div 3 directly inside section 4</div>
</section>
<p>Paragraph 6 directly inside the document's body element</p>

Try Editing It

[attribute*=value] substring matching attribute selector

A CSS [attribute*=value] selector selects all HTML elements whose attribute's value contains at least one occurrence of the specified value—regardless of its location.

Syntax of the [attribute*=value] selector

Here is the syntax of a CSS [attribute*=value] selector:

[attribute*=value] { style declarations }

Example 1: Apply DeepPink to all the paragraphs whose class attribute contains a "t" value

The [attribute*=value] selector below selects all <p> elements whose class attribute contains a "t" value.

p[class*="t"] {
  color: DeepPink;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, DeepPink will get applied only to the <p> elements whose class attribute contains a "t" value.

<h1>Hello there! 👋 I am Heading 1</h1>
<p class="codesweetly">First paragraph immediately after heading 1</p>
<h2>Heading 2 is my name</h2>
<p class="code-sweetly">Second paragraph immediately after heading 2</p>
<p class="co-de-sweETly">Third paragraph</p>
<h2>Heading 2 is my name</h2>
<p class="CODESWEETLY">Fourth paragraph</p>

Try Editing It

CodeSweetly TIP

You can do a case-insensitive match of an attribute's value by placing the letter i before the closing bracket like so:

p[class*="t" i] {
  color: DeepPink;
}

Example 2: Apply red to all the paragraphs whose class attribute contains a case-insensitive "r" value

The [attribute*=value] selector below selects all <p> elements whose class attribute contains a case-insensitive "r" value.

p[class*="r" i] {
  color: red;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied only to the <p> elements whose class attribute contains a case-insensitive "r" value.

<section>
  <div>Div 1 directly inside a section 1</div>
</section>
<section>
  <p class="first-p">Paragraph 1 directly inside section 2</p>
  <p>Paragraph 2 directly inside section 2</p>
</section>
<section>
  <div>Div 2 directly inside section 3</div>
  <p class="FIRST-p">Paragraph 3 directly inside a section 3</p>
  <p>Paragraph 4 directly inside a section 3</p>
  <p>Paragraph 5 directly inside a section 3</p>
</section>
<section>
  <div>Div 3 directly inside section 4</div>
</section>
<p>Paragraph 6 directly inside the document's body element</p>

Try Editing It

Overview

This article discussed what a CSS attribute selector is. We also discussed the two types of attribute selectors.

I hope you've found this article helpful. Feel free to comment or share what you've learned so others can learn from you!

Support CodeSweetly: Buy me a coffee to help keep this site running freely. ❤️

Tweet this article