Comments on: Just how useful are CSS3 selectors?

By: Ricardo

Ricardo — Mon, 20 Oct 2008 13:53:33 +0000

As Adam’s question remains unanswered:

@Adam: that’s an uncommon case, but it is doable in three different ways:

1. simplest:

$(‘h1′).prev(‘p’)

2. with a function:

jQuery.fn.getlastPs = function(){
var lastP;
this.siblings(‘p’).each(function(i){
if( $(this).next().is(‘h1′) ) { lastP=i; return false };
});
return this.nextAll(‘p’).eq(lastP);
};

3. using the nextUntil plugin:

$(‘h1:eq(0)’).nextUntil(‘h1′).filter(‘:last’)

http://docs.jquery.com/JQuery_1.2_Roadmap#.nextUntil.28.29_.2F_.prevUntil.28.29

By: Alan Gresley

Alan Gresley — Thu, 21 Feb 2008 17:39:31 +0000

@David

In a few years time this debate will be trivial since a greater number of web designers and developers will realize these CSS2.1 and CSS3 selectors great power. Take the table element for instance. Why slap a ID or class on it when you can simply select by the words in the summary.

table[summary*="index"] {}

table:not([summary*="index"]) {}

The same applies with an image.

img[alt="butterfly"] {}

Look at all these HTML attributes that we can use in attribute selectors.

action, alt, cite, dir, href, lang, method, name (I use id for bookmarks), rel, src, summary, title, type, value, width (for img or object).

With simple CSS, a nested unordered list for a drop down menu and at this time Opera 9.5, you can have full keyboard access (SHIFT + direction keys) with the same behavior as simple hovering. Something that javascript alone (or meshed in with CSS) has never been able to achieve.

I love CSS.

By: David Storey

David Storey — Thu, 21 Feb 2008 16:20:30 +0000

I don’t think I can agree with John here. Also note that Mozilla (who John works for) hasn’t implemented all of the selectors, unlike Opera, Safari and Konqueror. I don’t see an emediate use for many of the selectors, but the nth-child, nth-of-type etc are very useful and cut down on the use of javascript, or classes quite a bit. There are quite a few examples on this site that use the new selectors.

By: Thomas Thomassen

Thomas Thomassen — Wed, 20 Feb 2008 22:07:11 +0000

I’m guessing here, but: my bet is that most people using the lib hasn’t really looked into the new CSS3 selectors. They probably stick with the simple CSS1 and CSS2 selectors because that’s what they know.

I’m wondering what the question here is. Is it whether CSS3 selectors are useful for the jQuery library? Or whether CSS3 selectors are useful period?

By: Ben

Ben — Wed, 20 Feb 2008 08:50:49 +0000

It seems quite sensible to me to remove these things from a javascript library if they’re not being used. That doesn’t mean we have to lose them from css itself.

By: Iron_Storm

Iron_Storm — Tue, 19 Feb 2008 23:15:51 +0000

I also agree with David.

By: David

David — Tue, 19 Feb 2008 20:37:38 +0000

So CSS3 selectors are obviously difficult to implement.

Another argument to provide xpath in css instead of a new language. It’s already implemented in most of browsers.

By: Robin

Robin — Tue, 19 Feb 2008 15:56:24 +0000

Adam, you can’t do this in CSS. Being only able to talk to descendent and following siblings is designed into the language as a performance measure.

By: Cloudream

Cloudream — Tue, 19 Feb 2008 15:47:23 +0000

@Andy: no, there is no plugin to support ~= selector, because of hard to add this.

By: Neal G

Neal G — Tue, 19 Feb 2008 15:24:04 +0000

You are correct. The fact that people don’t use them is because they haven’t had enough exposure to them yet. Since IE has had trouble supporting the advanced selectors in the past, people have stayed away from these selectors.

I like to use css3 selectors like so:
/* Style external links */
a[href^="http"]

/* Style pdf links */
a[href$=".pdf"]

It appears that the library still supports these but regardless, a lot more can be done that what we realize right now.