CSS3 - New Attribute Selectors

Attribute selectors were first introduced in CSS2 to allow you to apply styles based on attributes within the specified tags. There were four such selectors with [attribute] allowing simple tests of whether the attribute exists in the tag, [attribute='value'] to test if the attribute exists with the specific value, [attribute~='value'] to look for the value in a space separated list within the attribute, and [attribute|='value'] which looks for either an exact match or the value at the start of the value followed by a hyphen.

CSS3 adds further attribute selectors.

CSS3 also allows attribute selectors to be chained together by placing them one after the other so that all of the specified selectors must apply for the tag to match.


a[href^='http://] {/* styles for external links /*}
a[href$='.pdf'] {/* styles for links to PDFs */}
img[src^='http://][src$='gif'] {/* styles for external gif images */}


The latest versions of all browsers will recognise these selectors. Earlier versions may not.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow