Dave Woods - Freelance Web Design Warwickshire

CSS3 Selectors

Whilst we’re still some way off being able to adopt CSS3 fully within web design. It’s certainly worth being aware of it’s capabilities and it would be great to start using it for those browsers that support it whilst ensuring that pages degrade gracefully for those that don’t.

If enough sites started to use the technology then surely the browser manufacturers would have to step up their attempts to support it with or without the W3C specification completed.

Obviously this could throw in complications with different browsers having different understandings of how to support CSS3 but for these CSS3 selectors at least, it seems as though all modern browsers support them.

The CSS Selectors

[att^=val]
Represents an element with the att attribute whose value begins with the prefix “val”.
[att$=val]
Represents an element with the att attribute whose value ends with the suffix “val”.
[att*=val]
Represents an element with the att attribute whose value contains at least one instance of the substring “val”.

The Examples

Starting string

p[class^="con"] {color: #F00;}

Would apply the colour red to all paragraphs that have a class starting with “con”

Ending string

p[class$="er"] {color: #F00;}

Would apply the colour red to all paragraphs that have a class ending with “er”

Contains String

p[class*="ain"] {color: #F00;}

Would apply the colour red to all paragraphs that contain a class with the string “ain”

Summary

Taking the examples above, all would be applied given the code

<p class="container">Here's some text</p>

This method is supported by Gecko (Firefox, Mozilla Suite, Seamonkey, Camino, Flock), IE7, Opera 9, Safari 1.3 and 2.0, Omniweb and Konqueror. However, there’s no support for this in IE6 so you’ll need to ensure that it degrades gracefully if you choose to use these selectors.

2 comments on “CSS3 Selectors

  1. Ed

    Hi Dave,

    You’re site is great and I’m learning so much from it. Thanks for all your tutorials.

    I was just browsing the CSS3 section and I think there might be a typo in the article above.

    I think the line:

    Would apply the colour red to all paragraphs that contain a class with the string “ead”

    should be:

    Would apply the colour red to all paragraphs that contain a class with the string “ain”

  2. Dave Post author

    Hi Ed,

    Thanks for the compliment, glad you’re finding the site useful.

    Yes, that was a typo so thanks for pointing that out. I think I’d originally setup a demo using a class called heading but thought that might cause confusion with the heading tags for some people so decided to change it and that was obviously one that I’d missed so thanks for spotting that one.

    Cheers.