RE: [css3] "Selectors that People Actually Use"

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