How to Get the Nth Child of an Element Using CSS2 Selectors

How do I get the nth child of an element using CSS2 selectors?

You can use adjacent sibling combinators in conjunction with the :first-child pseudo-class, repeating the combinators as many times as you need to reach a certain nth child. This is also mentioned in an answer to a different question.

For any element E, start with E:first-child, then add + E for subsequent children until you reach the element that you're targeting. You don't have to use the same element E, of course; you could switch that out for any type, class, ID, etc, but the important bits are the :first-child and + signs.

As an example, to get the third li of its ol, the following CSS3 selector:

ol > li:nth-child(3)

Would be replicated in CSS2 like so:

ol > li:first-child + li + li

An illustration:

<ol>
  <li></li> <!-- ol > li:nth-child(1), ol > li:first-child -->
  <li></li> <!-- ol > li:nth-child(2), ol > li:first-child + li -->
  <li></li> <!-- ol > li:nth-child(3), ol > li:first-child + li + li -->
  <li></li> <!-- ol > li:nth-child(4), ol > li:first-child + li + li + li -->
</ol>

Note that since there are no sibling combinators that look at preceding siblings (neither in CSS2 nor CSS3), you cannot emulate :nth-last-child() or :last-child using CSS2 selectors.

Additionally, you can only emulate :nth-child(b) for one specific child at a time, where b is a constant number in the formula an+b (as described in the spec); you can't achieve any complex formulas with adjacent sibling combinators alone.

How do I add :hover on the nth child of an element using CSS2 selectors?

The nth child is represented by the last element in the + chain (before the combinator immediately following it, if any), so you would attach the :hover selector to that element like so:

nav ul > li:hover:first-child a { background-color:red !important; }
nav ul > li:first-child + li:hover a { background-color:blue !important; }

If you wish to make this clearer for the first child, you can reorder the pseudo-classes, placing :hover at the end (i.e. after :first-child):

nav ul > li:first-child:hover a { background-color:red !important; }
nav ul > li:first-child + li:hover a { background-color:blue !important; }

Lastly, as others have mentioned, you should remove the !importants unless you have a specific reason to use them.

How can I get a specific number child using CSS?

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.

Is it possible to select the last n items with nth-child?

This will select the last two iems of a list:

li:nth-last-child(-n+2) {color:red;}

<ul>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
</ul>

nth-child formula for hover state - all elements except the first one

:nth-child() works with :hover just fine. :hover is not the problem here.

Look closely at the n+6 example. As you mentioned, that's for the first 5. However notice that the expression says 6, not 5.

So to match all but the first element, you need to start from 2. Hence, n+2.

li {  display: inline-block;}
a {  margin-right: 1.8rem;  padding-bottom: 23px;}
#login-signup li:nth-child(n+2):hover {  text-decoration: none;  border-bottom: 3px solid #292c2e;}

<ul id="login-signup">  <li><a href="#">No Underline</a></li>  <li><a href="#">Log In</a></li>  <li><a href="#">Sign Up</a></li></ul>

Why does CSS3 have both a :first-child and :nth-child() pseudo-class selector?

I think it's simply due to evolution of the CSS standard.

first-child is a CSS Level 2 selector
nth-child is a CSS Level 3 selector

CSS2 doesn't suddenly become obsolete just because CSS3 exists. From the CSS3 spec:

This document describes the selectors that already exist in CSS1 and CSS2, and further introduces new selectors for CSS3 and other languages that may need them.

select multiple child in css

You can separate the classes with a comma ,

.ListTaskTime tbody tr >td:nth-child(3), 
.ListTaskTime tbody tr >td:nth-child(6),
.ListTaskTime tbody tr >td:nth-child(9) {
    /* Common Styles Goes Here, Styles will apply to child 3,6 and 9 */
}

Note: You need to check the nth-child and define it manually in your stylesheet, as CSS cannot decide it for you if columns increase.

If you are using a server side language for generating a dynamic table, you can use functions like substr() to cut down the letters.

Side note : You don't have to use > unless and until you don't have any child table, this is sufficient.. tbody tr td:nth-child(3)