How to Get a Specific Number Child Using CSS

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.

Can CSS detect the number of children an element has?

Clarification:

Because of a previous phrasing in the original question, a few SO citizens have raised concerns that this answer could be misleading. Note that, in CSS3, styles cannot be applied to a parent node based on the number of children it has. However, styles can be applied to the children nodes based on the number of siblings they have.

Original answer:

Incredibly, this is now possible purely in CSS3.

/* one item */
li:first-child:nth-last-child(1) {
/* -or- li:only-child { */
    width: 100%;
}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

The trick is to select the first child when it's also the nth-from-the-last child. This effectively selects based on the number of siblings.

Credit for this technique goes to André Luís (discovered) & Lea Verou (refined).

Don't you just love CSS3? /p>

CodePen Example:

https://codepen.io/mattlubner-the-decoder/pen/ExaQZQR

Sources:

http://andr3.net/blog/post/142 (André Luís)
http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ (Lea Verou)

Select certain number child or children selector withing parent. css

Well, if the divs have those classes, you can simply list them:

.child-a, .child-b, .child-c

If you want to do it with nth-child, you must list them like this:

.parent :nth-child(1), .parent :nth-child(2), .parent :nth-child(3)

CSS numbering using nth-child

You can use CSS counters by using ::before (:before for IE8) and counter-reset/increment

div {  counter-reset: number;}p {  counter-increment: number;}p::before {  content: counter(number)" ";}

<div>  <p>abc</p>  <p>abc</p>  <p>abc</p>  <p>abc</p>  <p>abc</p></div>

CSS Selectors - Selecting a specific child element

With CSS3's :nth-child() it's easy to fulfill the "specific" criterion:

#shopping-cart-totals-table > tbody > tr:nth-child(2) > td:nth-child(2) .price

Or, an alternative that works more in favor of browser compatibility (does not use CSS3 selectors, assumes exactly two trs and two tds):

#shopping-cart-totals-table > tbody > tr + tr > td + td .price

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)

How to select custom number of rows using CSS nth-child selector?

To do that you'd have to specify the elements manually, like so:

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                text-align: center;
                border-collapse: collapse;
                width: 30%;
            }
            td, th {
                border: 1px solid grey;
                padding: 5px;
            }
            tr:nth-child(2), 
            tr:nth-child(3), 
            tr:nth-child(5) {
                background-color: lightgrey;
            }

        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Date</th>
                <th>Name</th>
                <th>Marks</th>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>AAA</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>BBB</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>CCC</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>DDD</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>EEE</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>FFF</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>GGG</td>
                <td>000</td>
            </tr>
        </table>
    </body>
</html>

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.