The attribute selectors is a really useful feature to select an element without adding superfluous id or classes. As long as the targeted element has an attribute like href, src and type we don’t have to do so.

The attribute selectors actually have been around since CSS 2.1, and now with a few more types of attribute selectors added in the CSS3 specifications, we are able to target the element’s attribute even more specifically.

And, in this post, we are going to use one of the syntax to select the file type that is inserted as part of the attribute’s value.

The Syntax and Browser Support

The file type is always at the end of the file name. So, to select that file type we can use the following syntax [attr$="value"]. This syntax uses the $= operator that will target the end of the attribute value, for example:

  a[href$=".pdf"]:before {  	background: url('../images/document-pdf-text.png') no-repeat;  }  

The snippet above will select every link that the attribute value ends with .pdf and insert a word-document-icon in the :before pseudo-element.

PDF Icon Source: Fugue Icons

While this is a common utilization of this selector, we surely can go beyond that.

Regarding browser compatibility; although this syntax is officially introduced as the CSS3 specification, it actually has been supported since Internet Explorer 7, so you can safely apply it through all your designs.

The Example

You’ll never know, if you never try. We just need to try something new to get a better understanding of something we don’t understand yet. So here, we are going to demonstrate how this syntax can be very helpful and handy to target an element in a particular HTML structure that used to be a bit difficult to apply using only plain CSS.

Below, we have an HTML5 structure to list three images with its caption. It is only for demonstration purpose, your markup doesn’t have to be exactly like the following snippet (e.g. you may have only one image or even three more images), but the point is you get to know how this syntax can be applied in a particular HTML structure.

<ul>  <li>  	<figure>  		<img src="images/macpro.jpg">  		<figcaption>jpg</figcaption>  	</figure>  </li>  <li>  	<figure>  		<img src="images/macpro.png">  		<figcaption>png</figcaption>  	</figure>  </li>  <li>  	<figure>  		<img src="images/macpro.gif">  		<figcaption>gif</figcaption>  	</figure>  </li>  </ul>

Each of the images listed above has the following formats or extensions, jpg, png, and gif. They also have a caption that represents its image extension; this caption will then act as the image label.

So, here is the plan, we are going to give different background colors for the caption for each different image extension. The JPG image will get a green caption color, the PNG will get blue, and lastly the gif will get purple.

First, let’s set the figure tag’s position relatively, because we are going apply absolute position for the caption.

  figure {  	position: relative;  }  

Add a little decoration for the images with borders and shadows.

  img {  	border: 5px solid #ccc;      -webkit-box-shadow:  1px 1px 3px 0px rgba(0, 0, 0, .5);      box-shadow:  1px 1px 3px 0px rgba(0, 0, 0, .5);  }  

And then, we set the default style and positioning for the caption. The image caption or label will have 50px square.

  img + figcaption {  	color: #fff;  	position: absolute;  	top: 0;  	right: 0;  	width: 50px;  	height: 50px;  	line-height: 50px;  	text-align: center;  }  

Now it is time to add the background color. To do so, we can combine the attribute selector with the adjacent sibling selector, +.

  img[src$=".jpg"] + figcaption {  	background-color: #a8b700;  }  

The snippet above will target every image with the source attribute ending with .jpg, then the adjacent selector will find the element next to it. In this case the figcaption will be added with the #a8b700 background color.

And here are all the codes for the rest of the image formats, .png and .gif.

  img[src$=".png"] + figcaption {  	background-color: #389abe;  }  img[src$=".gif"] + figcaption {  	background-color: #8960a7;  }  

Now, let’s see how it turns out live from the demo link below, or else you can download the source to examine it offline.

• Demo
• Download Source

Image sources are as follows: MacPro 1, MacPro 2 and MacPro 3

Conclusion

We hope that you can see the elegant side of styling using a special selector, like what we have tried to demonstrate above using the attribute selector. So, the next time you are styling your HTML, we highly reccommend you do some research on whether your styling can be applied using some special selector, rather than ruining your properly structured markup with extra classes or id.

There are actually two more new selectors of this type which we will cover in the next posts, so stay tuned.

Related posts:

1. A Look into: CSS3 Negation (:NOT) Selector
2. Beginner’s Guide To: Building HTML5/CSS3 Webpages
3. CSS3 Border-Image Property: Making Photos Really Cool!
4. Type as a Graphic Image: A Sometimes Ignored Art Tool

Chrome was just released from its beta chains and made tech news headlines when it was offered in Apple’s App Store a few days ago. The move was met with a huge response as the mobile version of the most popular browser in the world took just one day to be the most downloaded free app in its category. Then, came the avalanche of reports about Chrome being "a lot" slower than Safari probably due to Apple’s restriction of third-party apps to its Nitro JavaScript engine (which Safari runs on). And the fact that Safari is still the default browser ensures that you will still have to revert to Safari when using your Apple devices.

Well, we’ve played with Chrome for a couple of days just to get a feel of what Chrome can do. As it turns out, despite the reports, we prefer the newcomer compared to Safari. Read on to find out our ten reasons why Chrome may be better than Safari and see if you agree with us.

1. Ability to Open Unlimited Tabs

Google Chrome lets you open an unlimited number of tabs on the iPad, compared to only nine on Safari. We tried opening up to 20 tabs and it still performed very well without any lagging.

2. swiping between tabs Looks really cool

Unlike Safari, Google Chrome understand that pain of switching browser tabs (especially on iPhone). Google Chrome allows users to swipe from the edge of iOS devices to switch tabs easily. It’s an intuitive experience.

3. search and surf using omnibox

Google Chrome lets you search and surf fast, directly from the same box. Here, search results and website URLs appear as you type the keyword(s).

4. Ability to Sync with other devices

Google Chrome allows you to sign in and sync your omnibox (address bar) data, bookmarks, saved paswords and view tabs they have open between computers, Android devices and iOS devices. As long as you sign in Google Chrome with the same ID, you bring all your personalized information with you anywhere you go.

5. private browsing with incognito

If you liked browsing in incognito mode on the desktop version, then you’d be glad to know that this feature is included in the mobile version as well. Surf the Web on your iOS devices without leaving behind cookies, history or any other data while going incognito.

6. Voice search

Google Chrome has a built-in voice search which is of great convenience to users with disabilities or for individuals who have their hands full (cooking in the kitchen or when asking for directions while driving). Click on the microphone icon at the right side of the omnibar and ask away, rather than tap through the letters.

7. most visited websites on new tab

By default, a new tab loads up thumbnail versions of your most visited websites. It’s a "speed dial" feature to let you quickly jump to your most-visited websites from the get-go.

8. better keyboard

Google Chrome’s keyboard provides quick access to several important keys when the omnibox is in use, to aid in typing the full url out faster.

9. ability to save passwords

Google Chrome has an option to remember passwords for the sites you login. If you activate Google Chrome "Save Passwords" feature, you’ll get a prompt every time you sign in to a new website. Once Chrome saves your sign-in credentials, it will automatically complete the sign-in fields for you when you arrive at the website login page.

10. ability to clear your browser data right within the app

In Google Chrome, you can easily clear your browsing history, cache, cookies, and saved passwords right within the browser via ‘Settings’.

Conclusion

Despite being slower and not as smooth to use on iDevices as compared to Safari, with a foot through the door by its entry to the App Store, Chrome is well on its way to being the browser to beat. Sure the App Store version performed at less-than-optimum conditions — speed is still fundamental to a browser’s success — but apart from that users are treated to more intuitive and helpful features that you can’t find on Apple’s native browser.

Did you like using Chrome on your iPad or iPhone? Have you converted or are you adamant that Safari is the only way to go with the iOS? Share your thoughts.

Related posts:

1. How to Read .ePub Ebooks on Firefox and Chrome [Quicktip]
2. 40 Useful Google Chrome Extensions for Web Designers
3. How to View Website Source Codes on iPad / iPhone [Quicktip]
4. How to Get The Most Out of Google Drive

When you reach the size limit of your email Inbox, common practice dictates that you delete some of your emails to clear some space for new incoming email so they won’t be blocked and returned to the sender. It can be stressful especially when these new emails are of extreme importance.

This is avoidable if you can do a quick scan of your Inbox and delete or remove large emails particularly those with large attachments. The problem is, Gmail does not provide such tools.

In this entry, we will guide you to solve this problem with the help of Find Big Mail (FBM), a web application. FBM will identify the size of your emails, and sort them with labels directly in your Inbox so you can easily delete or move your big emails elsewhere to produce much-needed space, quickly and for free.

1. Insert Username

Lets start this tutorial by visiting FindBigMail.com. Here, you need to type in your personal Gmail or Google Apps account username in the text box and click on that big orange button that says ‘Find Big Mail’.

2. Grant Access

Of course your account is private, and since only you can access your email, you need to give permission, which you can revoke anytime under your ‘My Account’ settings, to Find Big Mail to access your data.

3. Now, Find Big Emails in your Inbox

Now that you have completed the process, all you have to do is just wait for the search results — it takes between five and sixty minutes to sort everything out, depending on the size of your Inbox. In the event that the results do not appear, click on the ‘refresh’ button, just to get things moving.

When the results are ready, the following pie chart will appear, tabulating the emails from your Inbox categorized by size.

FBM will also send you an email containing a detailed report with links to specific larger emails, so you can focus your attention there. Check, delete or move these larger emails elsewhere to unclutter your Inbox. As you can see in the image below, on the left are the top 3 biggest message links to direct you to the specific emails.

Apart from the email report by FBM, you will also receive new labels created as shown in the first image of this tutorial. Now you can simply navigate using these labels to find specific emails by size.

Conclusion

You can use the service for free; not a single dime is charged unless if you need to check your Google Apps account. Using FBM with your personal Gmail account is definitely easy, but you may be concerned about the security of your personal email (it is like giving a stranger unlimited access to your email account).

However, as mentioned on the blog, two security sites, namely Norton Safe Web and McAfee SiteAdvisor have done separate independent scans on the FBM service application and confirmed that the site is safe for use according to their detailed checklists. So worry no more and start clearing out the mess.

Related posts:

1. Schedule (Send later) Your GMail Emails with Rightinbox
2. Gmail Advanced Search – Ultimate Guide
3. How to Track if your Sent Email has been Opened in Gmail
4. How to Check your Gmail Stats with Gmail Meter