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:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>