CSS Attribute Selectors


CSS has the ability to target HTML elements based on any one of their attributes.

  • ID
  • Class 
  • Rel

We already know about classes and IDs let’s see example for rel attributes.

  1. <a href="http://BalajiIT.co.in">BalajiIT Solutions</a> 
    
  2. <a href="http://google.com">Goooooogle</a>
  3. <a href="http://yahoo.com/">yahooooooo</a>

Then you wanted to style each link slightly differently. The traditional way would probably be to give each link a class name in which to target, but that requires additional markup which is always a nice thing to avoid so This is the perfect use for attribute selectors.

a[href="http://BalajiIT.co.in"] { color: red; } 
a[href="http://google.com"] { color: black; }
a[href="http://yahoo.com"] { color: green; }
 
Advertisements

About balajiit

BalajiIT Solutions is a leading IT company providing end-to-end IT services and solutions to Corporate and Government Clients and various other PSUs. offering entire web based services, Software Development, outsourcing and IT Consulting.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: