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

CodeSweetly ads

Learn Flexbox with Images

Use beautiful images to learn CSS Flexbox.

Find out more

[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

CodeSweetly ads

Build your website with Namecheap

Get privacy protection FREE forever.

Learn more

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

CodeSweetly ads

Want tech support right now?

Our tech experts have the answers you need, 24/7.

Chat now

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

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.

CodeSweetly ads

Create your web presence in no time

Domain, Hosting, SSL, .COM, and more for less.

Buy now

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

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

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;
}

CodeSweetly ads

Get creative with your projects

Brainstorm, sketch, and create wireframe design mockups.

Learn more

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.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Join CodeSweetly Newsletter