By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,572 Members | 946 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,572 IT Pros & Developers. It's quick & easy.

td selector question

P: n/a
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
Jul 21 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Andrew Poulos <ap*****@hotmail.com> wrote:
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.


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 21 '05 #2

P: n/a
*Steve Pugh* <st***@pugh.net>:
Andrew Poulos <ap*****@hotmail.com> wrote:
<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
If it does then you need to resort to classes,


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.
: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()


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
Jul 21 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.