attribute selectors

Explanation: This CSS selector (attribute) allows you to style elements which have the appropriate attribute. Although this capability has been around since CSS-2.1, it is enhanced in CSS-3.

In CSS-2.1 one could test for

• a given attribute ( as in a[href] )
• a specific value ( as in a[href=”index.html’] )
• or, a match to a word ( as in img[alt=”small”] )

In CSS-3 one can now also test for

• a starting value ( as in a[href^=”http://”] )
• an ending value ( as in a[href$=”.zip”] )
• or, a value anywhere within a string ( as in div[id*=”wrapper”] )

Example CSS code:

a[href^=”http://”] {
font-weight:bold;
}

In the above example, only links to external pages are highlighted in bold.

Example page (view the source code): http://learning-html5.info/CSS3/CSS3_AttributeSelector.html (should work in most modern browsers).

References: