CSS Reference Guide: Attribute selectors

In HTML, attributes are used to provide additional information to DOM elements and can be targeted in CSS for styling purposes through various attribute selectors. These selectors include basic ones like [attr], which selects elements with a specific attribute, and more specific ones like [attr="value"], which targets elements with a particular attribute value. Other pattern-based selectors include [attr^="value"], [attr$="value"], and [attr*="value"], which match elements based on whether the attribute value starts with, ends with, or contains a specified string, respectively. Additional selectors such as [attr~="value"] and [attr|="value"] target space-separated values and values immediately followed by a hyphen, aiding in tasks like internationalization. These CSS attribute selectors enable flexible and efficient styling by allowing developers to target elements based on their attributes and values, enhancing the customization of web pages.