- From: Alan Gresley <alan1@azzurum.com>
- Date: Mon, 18 Feb 2008 10:44:59 -0700
- To: Jens Meiert <jens.meiert@erde3.com>
- cc: www-style@w3.org
Jens Meiert wrote: > Thought this has already been posted but couldn't find proof: > > > http://ejohn.org/blog/selectors-that-people-actually-use/ > > Although I do not agree with all of John's objections it looks like a few CSS 3 selectors might indeed require a revision. Just forwarding. > > -- > Jens Meiert > http://meiert.com/en/ No. no, no. He has no idea what is is talking about concerning selectors. This is my reply to him on his blog: @John Resig I don't understand your reasoning by saying most of the CSS selectors are useless. Here is some of your list: * E:root - Very un-useful in HTML. You already know what the root node is - it's named 'html'. Does every document have HTML as the root element? Look at the source of this page. http://annevankesteren.nl/test/css/at-rule/import-001.htm * E:lang(fr) - This could be achieved in so many other ways - but in the end, how many multi-language-on-the-same-page sites are there? Isn't it correct to wrap foreign text in elements with a "lang" attribute. <div>And in France they use the word <span lang="fr">école</span> for school</div> Is there other ways to do this? * E:nth-of-type(n) - I'm not sure what the motivation was for creating all the -of-type methods, I'm sure it sounded great on paper, but in the world of HTML it's not very useful. * E:nth-last-child(n) - Another "great on paper" method. Don't think I've ever seen it used. For table elements maybe. * E:only-child - When does this occur? and why would you need to select it? Because you may have a situation. <div> <table> <tr><td></td><td></td><td></td></tr> </table> </div> I don't have to give a class or ID to select the table table: only-child () * E ~ F - Only selects adjacent elements, in one direction. Why a ~? Why only one direction? Because it would create circular references. * E + F - Only the next element - rarely useful. What if another div element contained two tables and I wanted to select the later table table + table () * E[foo~="bar"] - Only matches values in a space-separated list. This is only useful for classes (which is taken care of with .class) and the ref attribute. Why not just use *=? Please see test 20 and test 22 on this selector test. http://css-class.com/test/css/selectors/attribute-match.htm Now consider that some elements can have multiple classes. One div may have class x and y with whitespace and another div may have class y and z with whitespace. Then I can do this. div[class~="y"] {} * E[hreflang|="en"] - Another selector that is really only useful for a single attribute - and not a popular one, at that. That could be simply: span[lang|="au"] <div>His <span lang="en-au">cobber</span> yelled, watch out for the <span lang="en-au">bluey</span>, luckily he was wearing his <span lang="en-au">daks</span> as he climbed into the <span lang="en-au">tinny</span>.</div> This link should help you translate. http://www.koalanet.com.au/australian-slang.html * E:empty - This might be useful if it could include empty whitespace text nodes, but it doesn't. This will only match elements like and , for whatever use that is. You have a box on a page with a certain background and border but no content. A user selects a button and this generates content inside the box by script. My empty element would be a div. These selectors are very powerful and as web developers understand them better, they will be used much more often. Alan http://css-class.com/
Received on Monday, 18 February 2008 17:45:22 UTC