W3C home > Mailing lists > Public > www-style@w3.org > February 2008

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

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
Message-ID: <20080218104459.34b83c2f3c9bef00757a2c62c0fb7450.1d6e49606e.wbe@email.secureserver.net>

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.


* 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.


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.


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:


<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.



* 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.


Received on Monday, 18 February 2008 17:45:22 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:34 UTC