


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.
The attribute selector is a powerful selector. This website uses it on links to determine external links from internal links.
Example attributes include:
href
placeholder
email
number
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).
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;
}
![]() | Happy New Year everyone! #2021NewYear 25 days ago |
![]() | Happy New Year everyone! All the best, Jamie Balfour. 25 days ago |
![]() | Retweet @PCMag: Adobe Flash support officially ends today. https://t.co/NNLcFK2yPx ![]() 25 days ago |