CSS TutorialLesson 38Free preview

CSS Attribute Selectors

This lesson is part of CSS · All levels

Summary

Attribute selectors select elements based on their attribute values, such as input[type="email"] or a[href^="https"]. There are different forms of matching: exactly the same (=), one word in the list (~=), the beginning (^=), ending ($=), and containing (*=). This selection creates an automatic style for input or external link types without adding a class.

Key points

The basic form [attribute] selects the element that has that attribute.
[a="v"] matches the exact value, whereas [a~="v"] matches one of the words in the value list.
[a^="v"] matches the value that starts the text, [a$="v"] that ends, and [a*="v"] that contains it.
General usage: style according to input type and mark the link that opens a new tab.
Selector attributes help keep HTML clean from additional classes.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.