attributeselector

An attribute selector is a CSS selector that targets elements based on the presence or value of their HTML attributes. It can match on the presence of an attribute or on specific attribute values. The syntax forms include several patterns that express different kinds of matching.

Common forms include:

- [attr] selects elements that have the attribute attr present, regardless of its value.

- [attr="value"] selects elements whose attr value exactly equals "value".

- [attr~="value"] matches when the attr value is a whitespace-separated list containing "value".

- [attr|="value"] matches "value" or strings starting with "value-" (often used for language subtypes).

- [attr^="value"] selects values that start with "value".

- [attr$="value"] selects values that end with "value".

- [attr*="value"] contains "value" as a substring.

These selectors can be combined with other selectors to form complex rules, for example:

- a[href^="https://"] targets secure links.

- input[type="text"] selects text input fields.

- [data-id|="item"] matches elements whose data-id is "item" or starts with "item-".

Attribute selectors contribute to CSS specificity similarly to class selectors. They are widely supported in modern browsers and are commonly used with CSS3 selectors and APIs such as querySelectorAll, which allow selecting elements based on attributes at runtime. The :not() pseudo-class enables negation, for example :not([attr]) selects elements that do not have the attribute. Use attribute selectors to style elements by metadata rather than by tag or class, while considering maintainability and potential performance implications on large documents.