CSS4 SELECTORS

 

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-wordfirst-wordlast-word andlast-line. Having this control would alleviate many needs for the spanelement, 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.

You may also like...