If I have some HTML that looks like this:

<div class="option">
<table>
<tbody>
<tr>
<td>blah</td>
<td>blah</td>
</tr>
</tbody>
</table>
</div>


How can I create a selector that refers to the first TD and another
selector that refers to the second TD? I'd rather not add a class or id
attribute to the TDs. I've been experimenting with child, descendant etc
selectors but I can't get it working right.

Andrew Poulos

Andrew Poulos <ap_prog@hotmail.com> wrote:
[color=blue]
>If I have some HTML that looks like this:
>
><div class="option">
> <table>
> <tbody>
> <tr>
> <td>blah</td>
> <td>blah</td>
> </tr>
> </tbody>
> </table>
></div>
>
>
>How can I create a selector that refers to the first TD and another
>selector that refers to the second TD? I'd rather not add a class or id
>attribute to the TDs. I've been experimenting with child, descendant etc
>selectors but I can't get it working right.[/color]

Does it need to work in IE?

If it does then you need to resort to classes, if it doesn't then
there are a number of possibilities, including :first-child to select
the first one and :last-child to select the last one; td + td to
select the second (and subsequent) cells; CSS3 offers nth-child()
which lets you styles any column you like with ease.

Actually IE can count cells so styling via the DOM is possible with
some JavaScript. By doing this the IE7 package of scripts
http://dean.edwards.name/IE7/ offers support for some of the CSS
selectors mentioned above.

Steve

"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

*Steve Pugh* <steve@pugh.net>:[color=blue]
> Andrew Poulos <ap_prog@hotmail.com> wrote:
>[color=green]
>> <table>
>> <tbody>
>> <tr>
>> <td>blah</td>
>> <td>blah</td>
>> </tr>
>> </tbody>
>> </table>
>>
>> How can I create a selector that refers to the first TD and another
>> selector that refers to the second TD? I'd rather not add a class or id[/color]
>
> If it does then you need to resort to classes,[/color]

Some cases can be solved with added 'col's and IE's non-standard support
for them, though. Whether that was an option here, can't be told from that
code fragment.
[color=blue]
> :first-child to select the first one and :last-child to select the last
> one; td + td to select the second (and subsequent) cells; CSS3 offers
> nth-child()[/color]

Just to be clear, ':last-child' is also from CSS*3 Selectors and thus is
not supported by, for instance, Opera*7, but by Gecko. The rest is CSS*2,
but not CSS*1, where MS only claims IE supporting the latter.

--
"What this country needs is more free speech worth listening to."
Hansell B. Duckett