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
Section titled “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
Section titled “[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
Section titled “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
Section titled “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
Section titled “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
Section titled “[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
Section titled “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
Section titled “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
Section titled “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
Section titled “[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
Section titled “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
Section titled “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
Section titled “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
Section titled “[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
Section titled “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-"
Section titled “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-"
Section titled “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
Section titled “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
Section titled “[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
Section titled “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
Section titled “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
Section titled “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
Section titled “[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
Section titled “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
Section titled “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
Section titled “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
Section titled “[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
Section titled “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
Section titled “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
Section titled “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>