How to Select The 1St and Then Every 4Th Row in a HTML-Table with Nth-Child()-Selector

How do i select the 1st and then every 4th row in a html-table with nth-child()-selector?

Shoulb be something like

tr:nth-child(4n+1) {
  declarations
}

Select every Nth element in CSS

As the name implies, :nth-child() allows you to construct an arithmetic expression using the n variable in addition to constant numbers. You can perform addition (+), subtraction (-) and coefficient multiplication (an where a is an integer, including positive numbers, negative numbers and zero).

Here's how you would rewrite the above selector list:

div:nth-child(4n)

For an explanation on how these arithmetic expressions work, see my answer to this question, as well as the spec.

Note that this answer assumes that all of the child elements within the same parent element are of the same element type, div. If you have any other elements of different types such as h1 or p, you will need to use :nth-of-type() instead of :nth-child() to ensure you only count div elements:

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

For everything else (classes, attributes, or any combination of these), where you're looking for the nth child that matches an arbitrary selector, you will not be able to do this with a pure CSS selector. See my answer to this question.

By the way, there's not much of a difference between 4n and 4n + 4 with regards to :nth-child(). If you use the n variable, it starts counting at 0. This is what each selector would match:

:nth-child(4n)

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n+4)

4(0) + 4 = 0  + 4 = 4
4(1) + 4 = 4  + 4 = 8
4(2) + 4 = 8  + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...

As you can see, both selectors will match the same elements as above. In this case, there is no difference.

nth-child for every two table rows

Realize that you are doing groups of 4, then you can see that you can have every 4th element and every 4th element minus one being white, then every 4th element minus two, or every 4th element minus 3 being grey.

So, you'd use 4n and 4n-1, then 4n-2 and 4n-3:

div:nth-child(4n), div:nth-child(4n-1) {
    background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
    background: blue;
}

That code isn't precise to your case, I wrote it for a jsFiddle proof-of-concept.

NB disclaimer: Keep in mind that nth-child does not work in IE8. Typical issue, of course.

How to select first and last TD in a row?

You could use the :first-child and :last-child pseudo-selectors:

tr td:first-child,
tr td:last-child {
    /* styles */
}

This should work in all major browsers, but IE7 has some problems when elements are added dynamically (and it won't work in IE6).

CSS nth-child - get 1st, 2nd, 4th and 5th children at once?

If you want to be explicit, one way is to repeat :nth-child() like so:

tr:nth-child(1), tr:nth-child(2), tr:nth-child(4), tr:nth-child(5)

Alternately, since the table happens to have exactly 5 rows, you can just exclude the third row and you'll get rows #1, #2, #4 and #5:

tr:not(:nth-child(3))

jsFiddle preview

Select the last 3 child elements

You can read more here about nth-last child, but this should basically do the trick of selecting the last 3 children with just CSS

#something a:nth-last-child(-n+3) {
    /*declarations*/
}

fiddle demonstration from Fabrício Matté

This will only select those rows returning a positive number for out N expression (-n+3), and since we are using nth-last-child, it's counting from last to first,
so first rows from bottom gives,

f(n) = -n+3
f(1) = -1+3 = 2 <- first row from the bottom
f(2) = -2+3 = 1 <- second row from the bottom
f(3) = -3+3 = 0 <- third row from the bottom

everything else will return a negative number

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>

Set Different Color for every 5 row in php

By setting the $css value and changing it every 5 records:

@php $count = 1; $css = 'honeydew'; @endphp
                            @for($i = 0; $i <= 99; $i++)
                                @php
                                    if($count % 6 == 0){
                                        $css = ($css === 'honeydew' ) ? 'aliceblue' : 'honeydew';
                                    }
                                    
                                $count++;
                                @endphp
                                <tr class="allrow {{$css}}" id="row_{{$i}}">
                                    <td width="20%">
                                    <select class="form-control select2 firstname v1" id="name1_{{$i}}" name="name[]" style="width: 100%;">
                                        
                                    </select></td>
                                    <td width="20%"><input type="number" name="winlose[]" id="amt1_{{$i}}" class="form-control first" value="0.00"></td>
                                    {{-- <td width="20%"><select class="form-control select2 secondname v1" id="name2_{{$key}}" name="name2[]"></select></td>
                                    <td width="20%"><input type="number" name="winlose[]" id="amt2_{{$key}}" class="form-control second"></td> --}}
                                    <td width="20%"><a href="#" class="btn btn-danger remove">-</a></td>
                                </tr>
                            @endfor