The attribute selector is used to select elements that have a specific attribute value, that is, elements that have a specified attribute and have a specified value.
Attribute selector
The attribute selector is a powerful selector. This website uses it on links to determine external links from internal links.
Example attributes include:
hrefplaceholderemailnumber
Square brackets are used to start an attribute selector:
input[type=number]{
background: #f00;
}
The above sample will make the background of any input element which has the attribute type="number".
As well as being able to specify a value like number, regular expressions such as ^=http can be used (this regular expression will check if a string starts with http).
Select all where attribute exists
It's also possible to select all elements which have an attribute regardless of it's value. This is a very useful tool because it allows you to select all elements without a class, for instance, using CSS.
This example demonstrates how to select all elements with a class attribute, regardless of what class this is:
input[class]{
background: #f00;
}
This next version will do the opposite, selecting all elements without a class (it uses the CSS :not pseudo-selector):
input:not([class]){
background: #00f;
}
