Slightly ajar

With CSS3 selectors more or less finished, there will likely be no more additions to the spec. However due to the modular nature of CSS, there is no reason why work on a level 4 module can't start in parallel with CSS3 work. The selectors module is one area where I personally think there are some useful features missing, which I'd love to see added at a later date.

If you take the tag line for this blog, I've used an image as I didn't want to use many span elements to style each word individually. There is already an nth-child selector. Why not a nth-word? While we are at it, we'd may as well have, nth-last-word, first-word, last-word and last-line. Having this control would alleviate many needs for the span element, and more control in a design. It is a fairly common technique in print design to make the first few words bold in a article. Elements like pull quotes also often mix font sizes and styles in one sentence.

Another thing that would be useful is to have something similar to the attribute selectors for selecting words in the text. For example, it is good practice to use a more fancy ampersand in headlines, or you may want your logo in headings to be a different font and colour. I'm not sure what the best syntax would be, but if you could specify something like h1 word=& (or &) it would be very useful.

I don't expect these to be considered for the selectors module for a long time, if at all, but I think they'd be useful to have in the toolbox.

CSS3 development work is going full steam ahead for most browsers. At Opera this is no exception. Most people don't have the privilege of testing out our latest internal builds, which will go into a future release of our browser, so I thought I'd share with you some of the great work our developers have been up to in regards to CSS3.

A lot of work is going into selectors, and there is a quite extensive list of extra support added to those already implemented in Opera 9.1. New in the latest builds include:

• :root
• :not()
• :nth-child()
• :nth-of-type()
• :first-of-type
• :target (still buggy at present)

As well as those above, the following are implemented in our core engine, but not currently enabled due to various issues:

• :empty
• :nth-last-child
• :nth-last-of-type
• :last-child
• :last-of-type
• :only-child
• :only-of-type

It is planned that these will be enabled by the time the other selectors are included in a release version of Opera. Having all these selectors supported will allow designers to be able to have much more control over their designs without adding extra class attributes to the HTML or using JavaScript to allow certain effects.

One example is :nth-child. With this it is possible to add alternating style using :nth-child(odd) and nth-child(even). This can be useful on data tables, so that each row has an alternating background colour, making it easier to scan through the information. A lot of blogs use a similar approach (currently using extra mark-up) to make alternating rows of comments styled differently. Using different values in the parentheses allows endless options to be used. nth-child(4) will match the 4^th child of the element it is applied to, while something more complex like nth-child(4n) will match every 4^th child (such as a row in a table), and nth-child(4n+6) will do the same, but has an offset of 6, which means it wont be applied until the 6^th child has been reached.

Another example is :first-of-type. This could be used to slim down the CSS code that is used on this blog. Instead of using all sorts of selectors to apply the drops cap to the first paragraph in a post, using p:first-of-type would enable the first p element to be matched in a blog post, then first-letter could be chained to this, such as p:first-of-type:first-letter. It wouldn't matter if a Div element was before the first paragraph, it would ignore everything until it reaches the first p tag.

With all these changes, where does this leave selector support in Opera once the new additions get released in an official build? Well apart from bugs in any of the implementations, all the selectors will be supported, and the only thing currently lacking is support for the ::selection pseudo-element. Of course there is still a lot of work to do on the other CSS3 goodies that aren't currently supported.

For a much more comprehensive look at CSS3 selectors, take a look at Roger Johansson's excellent article on the subject. Away from selectors, I can also confirm that text-shadow has been implemented in internal builds. As the name suggests, this allows shadows to be applied to text, allowing some nice effects.