5 ms·

Be careful with nth-child -- my advice is to only use it with lists where every item is of the same type. It's tempting to start using it with things like table

Be careful with nth-child -- my advice is to only use it with lists where every item is of the same type. It's tempting to start using it with things like tables to style your rows super quickly, but then the second you need to add a single row or column then everything breaks and you need to spend half the day fixing something that should have taken about 5 minutes.

91bananas 12y ago
For this reason I am much more a fan of nth-of-type, and all of the -of-type's, since they actually look at the element type and can say, I should style this one but not anything else that may appear at the same level.
- mmastrac 12y ago
  I'm really looking forward to CSS selectors level 4. That spec will include a new parameter to nth-child: nth-child(3 [of S]), where S can be any further selector. http://dev.w3.org/csswg/selectors-4/#child-index http://dev.w3.org/csswg/selectors-4/#child-index
- kmz 12y ago
  Actually just found out about -of-type's, very powerful.
psychometry 12y ago
Since most tables are generated programmatically these days, it's probably easier just to use classes for this kind of styling. And it seems a lot of people forget about the <colgroup> HTML element, which makes it easy to style columns without adding classes to every table cell.
- Alex3917 12y ago
  I agree that classes are the best bet. In terms of colgroup, the one issue is that it won't work if you're using colspan on only a subset of your rows.
- slang800 12y ago
  It's probably even easier to just put inline styles on every row, but neither of those practices are going to result in maintainable markup. By adding classes for the singular purpose of styling them, you tie your markup to the appearance of the web page. Instead, classes should be used to further describe the contents of elements in relation to each other. Then all the presentational rules can be kept in CSS, and selectors can be used to style based on the meaning of the content. This means the style of the page can change without modifying the markup. And if the styles are written well enough, they can be applied to any (sane) markup. Oh and +1 for colgroup!

91bananas 12y ago

For this reason I am much more a fan of nth-of-type, and all of the -of-type's, since they actually look at the element type and can say, I should style this one but not anything else that may appear at the same level.

mmastrac 12y ago
I'm really looking forward to CSS selectors level 4. That spec will include a new parameter to nth-child: nth-child(3 [of S]), where S can be any further selector. http://dev.w3.org/csswg/selectors-4/#child-index http://dev.w3.org/csswg/selectors-4/#child-index
kmz 12y ago
Actually just found out about -of-type's, very powerful.

psychometry 12y ago

Since most tables are generated programmatically these days, it's probably easier just to use classes for this kind of styling. And it seems a lot of people forget about the <colgroup> HTML element, which makes it easy to style columns without adding classes to every table cell.

Alex3917 12y ago
I agree that classes are the best bet. In terms of colgroup, the one issue is that it won't work if you're using colspan on only a subset of your rows.
slang800 12y ago
It's probably even easier to just put inline styles on every row, but neither of those practices are going to result in maintainable markup. By adding classes for the singular purpose of styling them, you tie your markup to the appearance of the web page. Instead, classes should be used to further describe the contents of elements in relation to each other. Then all the presentational rules can be kept in CSS, and selectors can be used to style based on the meaning of the content. This means the style of the page can change without modifying the markup. And if the styles are written well enough, they can be applied to any (sane) markup. Oh and +1 for colgroup!