Advanced [attr] selectors

Selects elements with a certain attribute value. This page tests three attribute selectors:

1. p[testAttr^=foo]: any element whose testAttr attribute has a value that starts with "foo".
2. p[testAttr$=foo]: any element whose testAttr attribute has a value that ends with "foo".
3. p[testAttr*=foo]: any element whose testAttr attribute has a value that contains "foo".

Testsheet:

p[testAttr^=foo] {color: red;}
p[testAttr$=foo] {font-weight: bold;}
p[testAttr*=foo] {text-decoration: underline;}

This paragraph has testAttr="foobar". It should be red and underlined.

This paragraph has testAttr="barfoo". It should be bold and underlined.

• The testAttr^=foo works only on the first paragraph, since that paragraph has a class value that starts with "foo".
• The testAttr$=foo works only on the last paragraph, since that paragraph has a class value that ends with "foo".
• The testAttr*=foo works on both paragraphs, since both have a class value that contains "foo".