CSS [attribute=value] Selector
The [attribute=value] selector in CSS is used to select those elements whose attribute value is equal to “value”.
Syntax:
element [attribute = "value"] { // CSS Property }
Note: <!DOCTYPE> must be declared for IE8 and earlier versions.
Example 1: In this example, The selector h1[id=”Beginner”] targets the h1 element with id=”Beginner” and applies a green background color and white text color and The selector li[class=”gfg”] targets li elements with class=”gfg” and sets the text color to green.
html
<!DOCTYPE html> < html > < head > <!-- CSS property used here --> < style > h1[id="Beginner"] { background-color: green; color: white; } li[class="gfg"] { color: green; } </ style > </ head > < body > < h1 id = "Beginner" >w3wiki</ h1 > < ul > < li class = "gfg" >Data Structure</ li > < li class = "Beginner" >Algorithm</ li > < li class = "gfg" >DBMS</ li > < li class = "Beginner" >C++ programming</ li > </ ul > </ body > </ html > |
Output:
Example 2: In this example, The CSS selector p[this=Beginner] targets <p> elements with this=”Beginner” attribute value and applies green background color and white text color.
html
<!DOCTYPE html> < html > < head > < title > CSS [attribute=value] Selector </ title > <!-- CSS property --> < style > p[this=Beginner] { background-color: green; color: white; } </ style > </ head > < body > < h2 >[attribute=value] Selector</ h2 > < p this = "Beginner" >Paragraph 1</ p > < p this = "Beginner" >Paragraph 2</ p > < p this = "Beginner" >Paragraph 2</ p > </ body > </ html > |
Output:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
Contact Us