My OperaThis topic has been closed. No new entries allowed.
Reason: You can now post comments on articles on Dev Opera
You need to be logged in to post in the forums. If you do not have an account, please sign up first.
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 )
Hi all, Hi Christopher
also this article was translated in Italian: http://www.extrowebsite.com/articolocss.asp?id=81
Giuseppe
also this article was translated in Italian: http://www.extrowebsite.com/articolocss.asp?id=81
Giuseppe
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.
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.htmlMain browser and mail: 9.27 • Secondary: 10.63 (still has annoying UI regressions: inability to detach tab normally, passes source file w/o extension to external editors)
extendopera.org • Report bugs to public BTS
extendopera.org • Report bugs to public BTS
1. September 2008, 15:43:36 (edited)
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.
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.
1. September 2008, 16:52:30 (edited)
Thanks for reply Bruce!
Imagine (or look at my examples) that some of rows have class hideit and applied style like )
I would expect that this stylesheet rule will paint my table correctly -- taking to account rows w/o class.
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.
This is true. But I'm talking about different behaviour of nth-child.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.
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.
Main browser and mail: 9.27 • Secondary: 10.63 (still has annoying UI regressions: inability to detach tab normally, passes source file w/o extension to external editors)
extendopera.org • Report bugs to public BTS
extendopera.org • Report bugs to public BTS
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 <a href="http://my.opera.com/ODIN/blog/">Opera Developer Network blog</a> before the end of the week detailing all this.
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 <a href="http://my.opera.com/ODIN/blog/">Opera Developer Network blog</a> before the end of the week detailing all this.
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...
I should take a note about this somewhere.
Really?CSS counters which are incremented with visibility:hiddenn, but not incremented if they take display:none'
I should take a note about this somewhere.
Main browser and mail: 9.27 • Secondary: 10.63 (still has annoying UI regressions: inability to detach tab normally, passes source file w/o extension to external editors)
extendopera.org • Report bugs to public BTS
extendopera.org • Report bugs to public BTS
3. September 2008, 08:44:55 (edited)
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-replacement
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-replacement
At least Opera should fix this:
http://www.quirksmode.org/css/nthchild.html
http://www.quirksmode.org/css/nthchild.html
Opera has problems when elements are added dynamically.
Main browser and mail: 9.27 • Secondary: 10.63 (still has annoying UI regressions: inability to detach tab normally, passes source file w/o extension to external editors)
extendopera.org • Report bugs to public BTS
extendopera.org • Report bugs to public BTS
Originally posted by brucelawson:
Still impatiently waitingI'm going to write up a blog post for the Opera Developer Network blog before the end of the week detailing all this.
Main browser and mail: 9.27 • Secondary: 10.63 (still has annoying UI regressions: inability to detach tab normally, passes source file w/o extension to external editors)
extendopera.org • Report bugs to public BTS
extendopera.org • Report bugs to public BTS
