How can I get a specific number child using CSS?

html css css-selectors
Satch3000 picture Satch3000 · Apr 14, 2011 · Viewed 284k times · Source

I have a table whose tds are created dynamically. I know how to get the first and last child but my question is:

Is there a way of getting the second or third child using CSS?

Answer

BoltClock picture BoltClock · Apr 14, 2011

For modern browsers, use td:nth-child(2) for the second td, and td:nth-child(3) for the third. Remember that these retrieve the second and third td for every row.

If you need compatibility with IE older than version 9, use sibling combinators or JavaScript as suggested by Tim. Also see my answer to this related question for an explanation and illustration of his method.

Related questions

Can I write a CSS selector selecting elements NOT having a certain class or attribute?

I would like to write a CSS selector rule that selects all elements that don't have a certain class. For example, given the following HTML: <html class="printable"> <body class="printable"> <h1 class="printable">…

Read More
CSS selector for text input fields?

How can I target input fields of type 'text' using CSS selectors?

Read More
How can I style even and odd elements?

Is it possible to use CSS pseudo-classes to select even and odd instances of list items? I'd expect the following to produce a list of alternating colors, but instead I get a list of blue items: <html> <…

Read More