CSS3 features in the latest browsers

On the Microsoft DevDays 2007 at Amsterdam, in the presentation 'IE7 and Standards' Molly spoke about some new CSS selection features build into the latest browsers.

I've gotten into it myself for a bit. Pretty neat:

```
/* Only child selector */
```
```
#content > p { }
```
```
 
```
```
/* Adjacent sibling */
```
```
th + td { }
```
```
 
```
```
/* Attribute selectors */
```

/* Every 'a' element with the 'title' attribute */

```
a[title] { }
```

/* Every 'a' element whose 'id' attribute value is exactly equal to 'cart' */

```
a[id="cart"] { }
```

/* Every 'img' element whose 'alt' attribute value is a list of space-separated values, one of which is exactly equal to 'bar' */

```
img[alt~="offer"] { }
```

/* Every 'img' element whose 'alt' attribute value contains the substring 'offer' */

```
img[alt*="offer"] { }
```

These selectors are quite handy, but too bad 40% of the internet users still use Internet Explorer 6 and lower that don't support one bit of CSS3... Yet it ceases to amaze me that CSS2.1 is only a candidate recommendation. Far from version 3.

Here and here are CSS3 compatibility lists. At the time of publishing this article Mozilla 1.7 RC 1 and Safari 1.2 are the most advanced in CSS3, and Opera, who has always had excellent CSS support, has a lot of catching up to do.

While your at it: CSS3 Preview offers a great view off (all?) new CSS3 features.

Tags: