Using css only, how can I override the css of only the 2nd column of a table.
I can get to all of the columns using:
.countTable table table td
I can not get to the html on this page to modify it since it is not my site.
Thanks.
views:
105answers:
2
+5
A:
You can use the :nth-child pseudo class like this:
.countTable table table td:nth-child(2)
Note though, this won't work in older browsers (or IE), you'll need to give the cells a class or use javascript in that case.
Nick Craver
2010-03-29 00:04:32
This will only give the second cell in each table, not the second cell in each row. You need .countTable table table tr td:nth-child(2)
Deeksy
2010-03-29 00:13:52
@Deeksy - That's not accurate, it doesn't care what the selector is. `nth-child` is applied after finding the element, and it's `nth` compared to whatever parent it has, no matter if it was in the selector or not. You can see this working here: http://jsfiddle.net/JQQPz/
Nick Craver
2010-03-29 00:19:05
But who uses older browsers or IE? ;)
Duncan
2010-03-29 00:27:13
A:
You could designate a class for each cell in the second column.
<table>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
</table>
Duniyadnd
2010-03-29 00:04:34
I can't use this. Like I said, this isn't my page and so, I can't change the html.
Eric
2010-03-29 00:19:12