How to select elements by attribute using CSS selectors?

CSS selectors allow selecting elements by any attribute such as class, id, href etc.

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

[attr=match] checks for exact equality:

<div> <div title="product">select</div> <div title="sold-product">ignore</div> </div>

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

<div> <div title="product">select</div> <div title="sold product new">select</div> <div title="sold-product">ignore</div> </div>

[attr|=match] checks for exact equality except ignores hypen suffixes (e.g. -language):

<div> <div title="product">select</div> <div title="product-language-en">select</div> <div title="sold-product">ignore</div>  <div title="new product-language-en disabled">ignore</div> </div>

[attr^=match] checks whether the attribute starts with the match:

<div> <div title="product1">select</div> <div title="product2">select</div> <div title="product3">select</div> <div title="4product">ignore</div> </div>

[attr^=match] checks whether the attribute ends with the match:

<div> <div title="1product">select</div> <div title="2product">select</div> <div title="3product">select</div> <div title="product4">ignore</div> </div>