The CSS Attribute Selectors select or target HTML Elements based on their attribute or they only select html elements with a specified attribute.
Square brackets are also used while using CSS Attribute Selector.
Table of Contents
Example of CSS Attribute Selector
The following example will only select anchor elements with title attribute.
a[title] {
color: red;
}
The following example will only select paragraph elements with align attribute.
p[align] {
font-size:20px;
}
Best Usage of CSS Attribute Selector
The best thing about CSS Attribute Selector is that they can be used to select HTML Form elements without making their id or classes.
Example
input[type="text"] {
color:white;
font-size:20px;
background-color: red;
}
In this example the input element with type = "text" are being targeted. The text type input element is written as follow.
<input type="text">
This concept of using both attribute and it's value as CSS selector is also explained separately, it is known as CSS Attribute Value Selector.