Fun With CSS – Attribute Selectors

As I’m just playing around with my blog design, I’m actually learning a little bit about CSS2. One particular bit that I have never seen or used before are “attribute selectors”. Attribute selectors simple select a piece of code to be modified base on certain attributes.

For example, I was attempting to remove the “view more photos” link from the Flickr feed located in my side panel on my blog. I had tried several different approaches to this problem, but came up empty handed because the images and links all lack a CLASS or ID definition. That was, until I stumbled across a page on the W3C website defining certain selectors, their functions, and uses.

In order to finally remove the link, I used an Attribute selector like so:

#flickr_badge_wrapper a[href="http://www.flickr.com/photos/jerhoyet/"] {
display:none;
}

As you can see, I modified the <a> tag that included the attribute href=”http://www.flickr.com/photos/jerhoyet&#8221;, which successfully removed the link.

Neat huh?

Advertisements

One thought on “Fun With CSS – Attribute Selectors

  1. Pingback: How to remove the “view more photos” link from the Flickr feed « one cool site

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