CODEWITHSUNDEEP
jquerycss
StingHands
StingHands

Reputation: 45

CSS jQuery selector nth child

    <table>
     <tr>
          <td>1</td>
     </tr>
      <tr>
          <td>2</td>
     </tr>
      <tr>
          <td>3</td>
     </tr>
      <tr>
          <td>4</td>
     </tr>
      <tr>
          <td>5</td>
     </tr>
      <tr>
          <td>6</td>
     </tr>
      <tr>
          <td>7</td>
     </tr>
     <tr>
          <td>8</td>
     </tr>
    </table>

i want to color 4th and 5th and 6th with different color how do I select it thru nth child. having difficulties understanding it

table tr:first-child{background-color: #F57676;}
table tr:nth-child(even){background-color: #F5B3B3;}
table tr:nth-child(odd){background-color: #F2DCDC;}
table tr:last-child{ background-color: #F57676;}

Thanks

Upvotes: 0

Views: 140

Answers (4)

roo2
roo2

Reputation: 6071

jsFiddle Example

Use the nth-child(n+x) syntax to specify an offset, this selects the fourth row and above

tr:nth-child(n+4) {
  background-color: #FAA;
}

Upvotes: 1

Jack Dalton
Jack Dalton

Reputation: 3681

As a general rule I tend not to use Nth child as it's backwards compatibility is rather limited. I recommend applying html/css class names like 'class="4th"' instead as it will work on more legacy browsers.

If you plan on implementing it in jquery any way, use this reference site

Upvotes: 0

codingrose
codingrose

Reputation: 15699

Try:

$("table").find("tr:eq(3),tr:eq(4)").addClass("cls");

DEMO.

Upvotes: 0

Bas van Dijk
Bas van Dijk

Reputation: 10713

You could for example use. Here we select the 4th and 5th tr child of the table.

table tr:nth-child(4),
table tr:nth-child(5) {
    background-color: red;
}

Upvotes: 1

Related Questions