CSS: nth-child

CSS: nth-child

CSS3 added the supprt for an nth-child selector. For example, li:nth-child(even) could be used to change the background color of every other line instead of relying on server side css classes or client side javascript hacks. Please add support for this useful selector!

[url]http://www.w3.org/Style/CSS/Test/CSS3/Selectors/20011105/html/static/flat/css3-modsel-28.html

+1

I wouldn't expect it before 8.0 though

M.

+1

Considering Opera's great presence in the CSS working groups - I am a bit disappointed that we don't get more CSS3 bits to play with - even IE has more CSS3 support than Opera at the moment!

+1

"nth-child" is VERY useful.

Oh yeah, useful it is. I could for instance abandon constructs such as these:

#lista li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {...}

M.

Now why would you want to do that, Moose?

Originally posted by non-troppo
Considering Opera's great presence in the CSS working groups - I am a bit disappointed that we don't get more CSS3 bits to play with

Well, I for one am quite happy that they're orking on UI enhancements presently. Some more CSS toys -would- be fun, though. Maybe for the next version?

Originally posted by MTKnight
Now why would you want to do that, Moose?

Why??? Cascading Love Sheets, for instance! Any list where list items need to be each differently styled either requires you to add warm s-h-i-t-e to your markup, or use adjacent ladder, or else hope that Øpera will add support for the goody goods soon! My choice goes for the ladder. That is how my Destroy is styled, after all...

M.

I was being sarcastic.....

Hehe, you out-ironized a European! 1:0 to you then.

I am now doing an inaccessible design of a set of pages. And I love it.

M.

+1

Little bump

This would be a very useful selector and would help make Opera more CSS-complete.

What about bump again? ;-)

Topic was created about 2 years ago but Opera still doesn't support nth-child selector. Consider adding this selector in some near build, please.

I've made some example of using this, visit my page http://zajec.no-ip.com/nth-child - it looks wouderful :-)

I didn't knew there was a request this old !!
PLEASE I want this ! this and document.styleSheets:raider:

Originally posted by Zajec:

visit my page http://zajec.no-ip.com/nth-child - it looks wouderful :-)

Nice one !

Originally posted by xErath:

I didn't knew there was a request this old !!
PLEASE I want this ! this and document.styleSheets:raider:

Nice to know someone has wishes like mine ;-)


One more argument: We could use this selector to modify existing pages. For example google:
The first result from searching on white background
Second - on yellow background :-)

I want document.styleSheets so I can use IE7 script to patch Opera with nth-child
http://dean.edwards.name/IE7/

++supporters;

Originally posted by Zajec:

One more argument: We could use this selector to modify existing pages.

With exactly this reason.

Originally posted by Moose:

+1
I wouldn't expect it before 8.0 though
M.

9.0? 10.0?

WIR?

My +1!

Originally posted by Moose:

WIR?

I hope that's will be 9... but let's wait and see.
And I think when it will be ready Moose will moosefy opera:config, opera:history and opera:cache CSS with nth-child

+1, although I guess that implementing CSS selectors is a time-consuming job...

+1, I'm always for new nifty CSS options. Does any other browser support this one yet?

Microsoft MSN Explorer for Mac

nth-child
pointless extra classes/ugly chains of +

+1

I remade my nice example ;-) http://zajec.net/test/nth-child

(I have lost my previous version)

+1

Originally posted by Zajec:

I remade my nice example ;-) http://zajec.net/test/nth-child

That's nice! Waiting for implementation...

+1

I have feeling that this CSS 3 selector will not going to be implemented in Opera 9...
But I think that we can survive since no other browser (except Konqueror and dead MSN for Mac) support it yet...

+1

Originally posted by FataL:

But I think that we can survive since no other browser (except Konqueror and dead MSN for Mac) support it yet...

Maybe... But I really would like to use it in my widgets :/

+1

+2

+1

+1

It's coming I assume but css3 is not standardized yet. Its coming though I assume. Opera's not doing terrible with selector's this far: http://www.css3.info/selectors-test/test.html

Supported CSS3 selectors (out of 578)

• ie6: 276
  
• ie7: 300
  
• Opera (latest 8692): 347
  
• ff2: 357

That 347 number hasn't changed in quite a while but I am sure when css3 is done or closer to done it will get added.

EDIT: +1

Hey it seems to work now (Opera 9.51 10081), doesn't it ?

Yes of course. There's been lots of news around Opera supporting the selectors module about one year ago. David Storey even forged a somewhat friendly relationship with the css3.info guys around that time. This request has been met along the way

Cool! I did not notice this to work with 9.5 but maybe I overlooked it.

FIXED

There are still some issues:

• nth-child(128), 129, 130... doesn't work
  
• nth-child() does not work with dynamic content (i.e. styles don't apply correctly)

+1

Originally posted by FataL:

nth-child(128), 129, 130... doesn't work

omg, good one. seems 128 is too big of a number for the internal representation

The second bug especially is going to annoy a lot of people.

+1

@FataL: have you filed both of those?

Originally posted by fearphage:

have you filed both of those?

DSK-263338 (nth-child(128), 129, 130... doesn't work)

@fearphage, feel free to submit 2nd one.