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>
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>
[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>
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>
[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>
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>
[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>
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>
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
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>
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>
[attribute$=value]
substring matching attribute selector
A CSS [attribute$=value]
selector selects all HTML elements whose attribute’s value ends with the specified value.
Create NPM Package like a pro
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>
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>
[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>
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>