What are Attribute Selectors in CSS?

Web Development
,
#1

It is possible to style HTML elements that have specific attributes or attribute values. The attribute selector is used to select elements with a specified attribute. It is represented by square brackets [attribute].

  • The [attribute=“value”] selector is used to select elements with a specified attribute and value.
  • The [attribute~=“value”] selector is used to select elements with an attribute value containing a specified word.
  • The [attribute|=“value”] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).
  • The [attribute^=“value”] selector is used to select elements with the specified attribute, whose value starts with the specified value.
  • The [attribute$=“value”] selector is used to select elements whose attribute value ends with a specified value.
  • The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value.