CSS4 Selectors
Wednesday, 14. November 2007, 14:10:23
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.


Alexis Deveria # 14. November 2007, 14:59
Any reason why this could not still be added to CSS3 selectors? The spec appears to still be a "Working Draft"...or would additions just delay things even further?
David Storey # 14. November 2007, 15:12
Anonymous # 14. November 2007, 15:30
I'd like to see a parent selector;
div
Lars Andersson # 14. November 2007, 16:25
Alexis Deveria # 14. November 2007, 16:45
Anonymous # 14. November 2007, 16:53
The reason seems to be that browsers apply styles as they render, so they implement each element, followed by its children; a parent selector depends on the state of the child being known first, so it would be out of the normal render order.
I can see the logic in this argument, but Javascript applies styles after the initial render, and I wonder if it wouldn't be a huge imposition for browsers to do that too.
Sorry for the huge gaps in my comment above, BTW!
Anonymous # 14. November 2007, 17:51
While the word selector would be useful, I don't know if I agree with your specific example.
With support for it, in one manner or another, in every major browser, save Firefox, shouldn't we assume that browsers will have support for downloadable fonts? Your h1 could be styled with that font, and then set a word spacing between the two words to be the width of the image, and then set a background image on the h1 in the appropriate place?
Then again, that would fail once decided to rename the blog to include a third word...
What would a nth-word selected word do to the word-spacing attribute? Ignore it? Apply it to both sides?
Anonymous # 14. November 2007, 18:13
You're right, there's no reason why a CSS4 module couldn't be started now, but I think efforts would be better spent getting some more of the CSS3 (let alone 2.1) modules out the door.
Alexis Deveria # 14. November 2007, 18:28
@Brian: I would think nth-word would just be like putting opening and closing tags directly around the specified word(s). Thus the word spacing would still exist around that tag.
Also, I hope someone at my.opera.com is looking into this weird excessive line break bug. It's pretty annoying.
Anonymous # 14. November 2007, 18:56
What we need is for a browser maker to look into the mechanics of a parent selector and perhaps implement it on a trial basis; does anybody here know how to get in touch with someone who works for a browser maker? ;)
porneL # 14. November 2007, 19:32
I don't see use for nth-word though. It would get unpredictable in dynamic text. If you want something really cutting edge (and CPU heavy) go straight for regular expressions
I agree that there's a lot of desire (and use cases) for parent selector. Implementation is going to be tricky — it requires completely reversed approach to selector matching, but that sounds just about right for some distant-future CSS spec
Another sort-of related issue that keeps coming to www-style list is browser-bug selector.
or a bit more generic:
http://ben-ward.co.uk/journal/css3_required_properties/
(not quite selector, but closely related)
David Storey # 14. November 2007, 19:39
The reason I didn't suggest parent selector, although it'd be very useful, is I've heard many times that it is very difficult for browsers to implement and would require a second pass and reflow. There would be complications when the DOM changes too. We had support for most of the last-* suff for a while before enabling it due to performance problems.
Brian: in the example I mean the sub heading, with the different styles on each word, not the Slightly Ajar header.
Alexis Deveria # 14. November 2007, 19:40
Actually, since Opera already supports :only and :only-of-type, it already has to go back to apply a style. See this test I made. It first displays the span with a red background, then loads many many paragraphs, then changes the span to green when it discovers it's the only element of that type. So doesn't that mean it has to go against the render order already?
Edit: Admittedly that's still within the same parent element, so perhaps that's what makes it less of an issue.
FataL # 14. November 2007, 23:12
Anonymous # 17. January 2008, 09:47
Word/letter selectors and parent selectors are nice ideas.
Trouble with word/letter selectors (I'll refer to them as just word selectors) is that words would likely have to become elements at some point, otherwise if the word styles are stored somewhere else we'll need something other than the DOM. This would cost in terms of memory and time, though not greatly.
If we keep the DOM, what would they do to add the styles? Wrap spans around words? What properties would these spans take? If the content changes they must be adjusted - how does the browser know which spans were added and which existed already? It would have to keep track of what it changed. What if you are using techniques like switching style sheets? The whole thing starts to get messy and I believe modifying the DOM like this should be avoided for now, because style and content would no longer be completely separated.
But, let's say these problems were solved, then from an algorithmic point of view, if word selectors were implemented, they might be better as a new selector class, as the logic would probably end up quite different to other selectors.
I'm not saying it's not possible or worthwhile, but it would sure take a lot of effort.
If you really want effects like this you don't have to wait for w3c or the browser makers. Using a decent javascript toolkit like mootools, jQuery, prototype or yui would do it fairly easily and buy you a lot more besides.
I'd like to see the selectors generally extended to use regular expressions.
i.e. search for class, id, attributes by regular expression. My reasoning is that anyone who can understand selector syntax should be able to understand regular expressions, and for example attribute selectors are a bit limited.
Anonymous # 29. January 2008, 17:05
Parent selectors would allow us to build functional navigational elements without Javascript. Why is that a good thing?
Accessibility compliance for one, but we have a situation here with CSS that it can do half the job, but to do the full job on expanding nav lists, it needs a second language to complete the task. CSS can hide nav items, but without :hover or a nasty little class="active" and thus a page reload or DOM hack, we can't open up the menus without JS or without forsaking HTML structure with unneeded DIV's to to get the effect working.
Anonymous # 30. May 2008, 15:07
I'd like to see... to the very least, something like ":novalue", something that would be to the "input type=text" the equivalent to the ":checked" to the "input type=checkbox".
Not something that checks the attribute named value... something that is actually aware of the value at all time... even after someone types something in the field... that that to the very minimum lets you know if it is empty.
Anonymous # 5. February 2009, 13:05
Yes, I would like to have parent selector. It woule be very useful.
Anonymous # 14. March 2009, 09:07
Parent selectors - an idea they should have had when the logic should have hit them during the making of prior specs. When you have child selectors, why not parent selectors?
The idea of a selector that would apply to characters, entities, or words would just be fantastic!
The only problem I have is that things such as CSS3 have been in development for years and it's a standard that's considered vaporware. You know, one of those things that you know everyone would give a thousand bucks for but they still can't finish?
Opera, then Safari, Konqueror and Firefox will support CSS3 at least 15 years before Mico$oft Internet Explorer does, seeing as Internet Explorer still has the hasLayout bug, improper box model perception, and a still-inadequate understanding of CSS2.1, seeing as every browser should be able to understand that by now! CSS Level 1 began its life as a standard in 1996, then followed by CSS Level 2 in 1998, and CSS Level 2 Revision 1 some time later.
The point is, it's been so long waiting for CSS3 that we -should- be up to the point where we're seeing at least some mention of a possible CSS Level 4. And the unfortunate fact to face is that IE has around 65% of the browser market still. Abandoning CSS hacks for IE will eventually get everyone to change browsers. And it will result in not wasting 200 kilobytes out of 2 megabytes average just so Internet Explorer can work correctly. Fully-valid, compliant, very interactive, well-presented and well-formed websites get shot down by IE all the time.
It is time to move on from IE and see that the CSS3 spec is usable on most browsers, and open the discussion of CSS4.
To me, articles like this are quite exciting, and parent selectors as well as character, entity, or word/phrase selecting would just be out of this world and awesome! That would be a great present for the holidays this year - to hear that XHTML 2.0 has a working draft and the discussion for CSS4 has begun. I also agree that attribute selectors are...quite limited. It's time to move on to much-brighter horizons.