How to Work with CSS3 Selectors - dummies

By Sue Jenkins

In mid-2010, web designers and developers rejoiced as CSS3 began to make its way into the mainstream. Since that time, browser support for CSS3 has steadily increased and improved, even though CSS3 isn’t officially a W3C standard yet.

In fact, the only drawback (if you even want to call it that) to using these selectors today is that you may occasionally still need to add some browser-specific prefixes to your CSS to ensure that all the CSS3 styles appear correctly in the older versions of the most popular browsers.

To illustrate, if all browsers supported the CSS3 columns selector, you’d only need to specify a single columns declaration in your style like this:

div {
  columns:100px 3;

However, because this selector isn’t supported in the same way by all the popular browsers, the workaround is to write your single CSS3 declaration first, and then directly below it you’ll include duplicate declarations with browser-specific prefixes. Note how CSS comments are added to the CSS to identify the browsers associated with each prefix:

div {
  columns:100px 3;
  -webkit-columns:100px 3; /* Safari and Chrome */
  -moz-columns:100px 3; /* Firefox */

Here is a list of CSS3 prefixes by browser:

Browser Prefix
Internet Explorer -ms-
Firefox -moz-
Google Chrome -webkit-
Safari -webkit-
Opera -o- or -xv-

For an up-to-date listing of browser support for all the CSS3 properties, check out the chart at

Also be sure to download a free copy of the Smashing Magazine CSS3 Cheat Sheet PDF, which can help you discover how to use CSS3 in your web designs: Smashing Magazine.