CSS Attribute Selectors

Attribute selectors allow us to select HTML elements based on their attributes. This provides more precise and flexible styling, especially for forms and links.

Types of Attribute Selectors

Attribute selectors can be used in several forms: existence check, exact match, or partial matches (starts with, ends with, contains).

Selector	Description
[attr]	Selects all elements that have the specified attribute.
[attr="value"]	Selects elements whose attribute exactly matches the given value.
[attr^="value"]	Selects elements whose attribute starts with the given value.
[attr$="value"]	Selects elements whose attribute ends with the given value.
[attr*="value"]	Selects elements whose attribute contains the given substring.

Basic Attribute Selectors

The simplest attribute selectors are based on attribute existence or exact matches. These are often used to target links or form fields.

In the following example, we select links and text fields based on attributes:

Pattern-Based Selectors

Advanced attribute selectors allow partial matches. For example, we can specify that a link starts with https, ends with .pdf, or contains a specific word.