Last Updated on February 14, 2021 by Roshan Parihar
In this tutorial, learn how to use CSS attribute selector to select elements and apply CSS. The same elements can have different attributes and the CSS attribute selector makes it easier to select them.
What is CSS Attribute Selector
A CSS attribute selector is a way of styling an HTML element using the attribute. You don’t need to access an HTML element using its id or class. Use a specific attribute or attribute with a specified value to select an HTML element and give a CSS style to it.
CSS Attribute Selector is the easiest way of styling an HTML element by using the attribute and its value inside the square bracket. Learn below-given types of attribute selectors to style an HTML element.
How to Style an HTML element using CSS Attribute Selector
To style an HTML element, you can use different types of CSS attribute selectors. There are many different types of CSS attribute selector given below, you can use to apply CSS to an HTML element. See each type of example and learn how to use them to give styling.
- CSS [attribute] Selector
- CSS [attribute=”value”] Selector
- CSS [attribute~=”value”] Selector
- CSS [attribute|=”value”] Selector
- CSS [attribute^=”value”] Selector
- CSS [attribute$=”value”] Selector
- CSS [attribute*=”value”] Selector
CSS [attribute] Selector
Select and HTML element using the specified attribute. Suppose you want to select an HTML containing the attribute role, you can use this type of CSS attribute selector.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> ul.ul-attr li[role]{ background:yellow; } </style> <ul class="ul-attr"> <li role="first">One</li> <li>Two</li> <li>Three</li> <li role="fourth">Fore</li> </ul> |
Output
- One
- Two
- Three
- Fore
The above example applies the CSS to only the list element which contains the attribute role.
CSS [attribute=”value”] Selector
Select an HTML element using the specified attribute with its value. If you want to select an HTML element with a specified attribute and value, you can use this type of CSS attribute selector.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> ul.role-attr li[role="three"]{ background:yellow; } </style> <ul class="role-attr"> <li role="one">One</li> <li role="two">Two</li> <li role="three">Three</li> <li role="fore">Fore</li> </ul> |
Output
- One
- Two
- Three
- Fore
The above given example applies the CSS to only the list element that contains the attribute role="three" value.
CSS [attribute~=”value”] Selector
If you want to apply the CSS to all the HTML elements containing exactly the matching word or space-separated word in the class.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> ul.ulmatchattr li[class~="lithree"]{ background:yellow; } </style> <ul class="ulmatchattr"> <li class="one lithree">One</li> <li class="two">Two</li> <li class="lithree">Three</li> <li class="fore lithree">Fore</li> </ul> |
Output
- One
- Two
- Three
- Fore
The above-given example contain the list element with the matched class name as lithree a single or comma-separated.
CSS [attribute|=”value”] Selector
If you want to apply the CSS to the attribute containing the hyphen-separated value beginning with the specified attribute value.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> ul.ulmatchattrline li[class|="one"]{ background:yellow; } </style> <ul class="ulmatchattrline"> <li class="one-lithree">One</li> <li class="two">Two</li> <li class="one-two-lithree">Three</li> <li class="fore lithree">Fore</li> </ul> |
Output
- One
- Two
- Three
- Fore
The above-given example applies the CSS to the list elements start with the class “one” as a hyphen-separated value.
CSS [attribute^=”value”] Selector
If you want to apply the CSS to the HTML element containing the attribute value start with the specified value.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> ul.ulmatchattrinvert li[class^="one"]{ background:yellow; } </style> <ul class="ulmatchattrinvert"> <li class="onelithree">One</li> <li class="two">Two</li> <li class="onetwolithree">Three</li> <li class="fore lithree">Fore</li> </ul> |
Output
- One
- Two
- Three
- Fore
The above-given example applies the CSS to the list elements start with the class “one” as a starting value of the class attribute.
CSS [attribute$=”value”] Selector
If you want to apply the CSS to the HTML element containing the attribute value start with the specified value.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> ul.ulmatchattrdollar li[class$="one"]{ background:yellow; } </style> <ul class="ulmatchattrdollar"> <li class="lithreeone">One</li> <li class="two">Two</li> <li class="twolithreeone">Three</li> <li class="fore lithree">Fore</li> </ul> |
Output
- One
- Two
- Three
- Fore
The above-given example applies the CSS to the list elements start with the class “one” as a starting value of the class attribute.
CSS [attribute*=”value”] Selector
If you want to apply the CSS to the HTML element containing the attribute value start with the specified value.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> ul.ulmatchattrstar li[class*="mist"]{ background:yellow; } </style> <ul class="ulmatchattrstar"> <li class="lithree-mist">One</li> <li class="mist">Two</li> <li class="twolithre-mist">Three</li> <li class="fore_mist">Fore</li> <li class="fivemist">Five</li> <li class="six">Six</li> </ul> |
Output
- One
- Two
- Three
- Fore
- Five
- Six
The above-given example applies the CSS to the list elements start with the class “one” as a starting value of the class attribute.
Styling Form Input Types Using CSS Attribute Selectors
You can easily apply CSS to all the input types like text, email, submit. You just need to use the CSS attribute selector and the CSS you want to apply to these input types. See the example given below to learn how to apply CSS using attribute selector.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> .myforminput[type="text"]{ background:yellow; } .myform input[type="email"]{ background:green; } .myform input[type="submit"]{ background:#000; } </style> <form action="#" class="myform"> Username : <br><input type="text" name="username"><br><br> Email : <br><input type="email" name="email"><br><br> <input type="submit" value="Submit" name="submit"> </form> |
Output
The above example applies CSS to input types text, email, and submit.
You May Also Like to Read
I hope you like this post on how to use CSS attribute selectors.
Reference
Attribute Selectors Cascaded stylesheet
CSS Attributes