How to select elements by attribute using CSS selectors?

CSS selectors allow selecting elements by any attribute value such as class, id, href etc. This means we can extract any HTML elements based on attribute value with CSS selectors.

While class and id have special notation shortcuts - . and # respectively - any attribute can be selected using the attribute selector ([attribute]) which supports multiple operators:

1. The = match can be used for exact equality e.g. [attr=match] :

2. The ~= turns the attribute into an array of space-separated values and checks whether it contains the match (similar to .class and #id matches):

3. The |= checks for exact equality except ignores hypen suffixes (e.g. -language):

4. The ^= checks whether the attribute starts with the match:

5. The $= checks whether the attribute ends with the match:

6. The *= checks whether the attribute contains the match:

Finally, to make all of these matches case insensitive add i before the closing bracket, e.g. [attr=match i]