Discuss the articles posted on Dev.Opera.
By teleject 
Thursday, 28. August 2008, 13:12:43
Zebra striping tables with CSS3
In this article Christopher Schmitt gives a succinct overview of how to use the nth-child CSS3 property to easily create zebra-striped HTML tables.
( Read the article )
By floyd1616 
Sunday, 31. August 2008, 17:01:25
Hi all, Hi Christopher
also this article was translated in Italian:
http://www.extrowebsite.com/articolocss.asp?id=81 
Giuseppe
By FataL Monday, 1. September 2008, 05:44:27
The question is it possible to make nth-child to count only elements with some class name?
Now seems that the current algorithm is to gather pseudo-classes first...
This can be very usefull when you want to show and hide dynamically groups of rows in a table and want to keep proper "zebra styling" of rows.
tbody tr.zebra:nth-child(even) {background-color:Gray} See examples here:
http://rusrestaurant.com/tests/nth-child/nth-child-hidden.html
By brucelawson Monday, 1. September 2008, 15:08:09
Hi FataL
interesting question, and I had to go to the engineering group within Opera to get an answer.
The behavior you document is correct although it feels unintuitive.
Selectors work on the DOM tree, not on the visual tree, so whether or not an item has a display property of none makes no difference to the calcualtion of selectors.
Post edited Monday, 1. September 2008, 15:43:36
By FataL Monday, 1. September 2008, 16:46:38
Thanks for reply Bruce!
Selectors work on the DOM tree, not on the visual tree, so whether or not an item has a display property of none makes no difference to the calcualtion of selectors.
This is true. But I'm talking about different behaviour of nth-child.
Imagine (or look at my
examples) that some of rows have class
hideit and applied style like
.hideit {display:none} (let's not talk about accessibility this time
)
I would expect that this stylesheet rule will paint my table correctly -- taking to account rows w/o class.
tbody tr:not([class]):nth-child(even) {background-color:Gray} This selector works only with DOM tree, looking for a
class attribute befor applying
nth-child.
I would like to propose this changes to CSS 3 selectors spec, but first I want to know if it's doable for browser vendor.
Post edited Monday, 1. September 2008, 16:52:30
By brucelawson Tuesday, 2. September 2008, 15:57:51
Hi FataL
the response I got yesterday to your initial question was
"Selectors are designed to be invariant of CSS declarations. Also, Selectors is a standalone concept and can be used outside of CSS (eg, in XBL)"
It always evaluates the :nth-child first. Opera and Safari agree on that.
I made a test case to show some of my colleagues, and it was a nightmare to get our brains round. I agree with you that it's not the way a web author would expect it to work at all, particularly if you're used to CSS counters which are incremented with visibility:hiddenn, but not incremented if they take display:none'.
I'm going to write up a blog post for the
Opera Developer Network blog before the end of the week detailing all this.
By FataL Tuesday, 2. September 2008, 16:30:35
Ok, thank you very much for quick investigation. So I can't use CSS 3 selectors for painting dynamic tables and need to write some smart JS that will reapply classes on visible table rows every time user show/hide something...
CSS counters which are incremented with visibility:hiddenn, but not incremented if they take display:none'
Really?
I should take a note about this somewhere.
By brucelawson Wednesday, 3. September 2008, 07:42:04
Yeah, here's the item in the CSS 3 generated content spec
http://www.w3.org/TR/REC-CSS2/generate.html#q10 (which is, of course, still being developed and so is something of a moving target - see my blogpost on replacing images with the <code>content</code> property from the same CSS 3 module
http://my.opera.com/ODIN/blog/css-3-image-replacementPost edited Wednesday, 3. September 2008, 08:44:55
By FataL Friday, 12. September 2008, 19:21:05
At least Opera should fix this:
http://www.quirksmode.org/css/nthchild.htmlOpera has problems when elements are added dynamically.
By bugamok Tuesday, 13. January 2009, 17:37:48
Great article!
/Peter
By FataL Tuesday, 13. January 2009, 19:48:47
Originally posted by brucelawson:
I'm going to write up a blog post for the Opera Developer Network blog before the end of the week detailing all this.
Still impatiently waiting
