Definition:
When you want your HTML elements on a web page to look good and attractive, you use a CSS selector.
You will understand this clearly with an Example:
If you have made a form in HTML and you want:
- The input box should show green when someone types.
- Background color and border also need to be set. Then you use an Attribute Selector.
HTML element:
<input type="text" />Apply the Attribute Selector:
input[type="text"] {
border: 2px solid green;
background-color: #f0fff0;
}Here:
- input → the HTML element
- [type="text"] → the attribute where you want to apply the selector (to set border, text color, background color)
It shows that Attribute Selector applies the concept to any HTML element based on its attribute.
Syntax:
selector[attribute] { /* CSS properties */ }- selector → The HTML tag (like a, input, div, etc.)
- [attribute] → The attribute you are targeting (like type, href, title, etc.)
Example:
input[type="email"] {
border: 2px solid red;
background-color: #f0fff0;
color: green;
}It will apply styles only to elements where the type is "email" —no class or ID needed!
Output: