Quick Tip: Make the Most of CSS Attribute Selectors
videos

Quick Tip: Make the Most of CSS Attribute Selectors

on Jan 28th 2013 with 6 comments
Tutorial Details
  • Screencast duration: 7 mins
  • Difficulty: Beginner
  • Topic: CSS

If you’ve never used attribute selectors in your CSS before, you’re missing out on a great way to manipulate your styles. Let’s take a look at how you can make the most of them..

The Screencast


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

The Demo

Further Resources

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://twitter.com/mposborne Mark Osborne

    I think you glossed over the way that the |= selector matches values being followed immediately by a hyphen OR those that exactly match (like your first “red” example). Otherwise nice tip :)

  • Rick

    Is there a difference between using li.example and li[class~="example"]

    • http://www.facebook.com/commonmind Joey English

      The difference is in the added flexibility it can offer. For instance, I recently styled forms across a fairly large project and needed to target multiple input elements that required similar styling. There was roughly a dozen of these, each containing two hyphens (e.g., edit-quantity-product, edit-quantity-user, etc.). Instead of having to find and add each individual input and individual class, I used the following shortcut and was able to target every iteration of this form element, including any future iterations that might be generated by the CMS:

      input[class*='edit-quantity-']

      Hope this better clarifies where this can be useful!

    • http://hugogiraudel.com/ Hugo Giraudel

      Yes, performance. Attribute selectors are very heavy.

  • http://resbone.com/ Gabor Meszoly

    Nice tip! thanks

  • GorillaWma

    Great tip. So much things you can do with CSS, everyday I learn something new :)

  • Pingback: Make the Most of CSS Attribute Selectors | Tutorials Magnet

  • Pingback: Art Directed Posts: Blogging, with Style | Webdesigntuts+

  • Pingback: Art Directed Posts: Blogging, with Style | WebDesign | Adobe.La