CODEWITHSUNDEEP
htmlcss
I Like
I Like

Reputation: 1847

How to target multiple table rows with a single CSS rule?

I am wondering how you change certain properties of more than one table row with a single line of CSS. For example, I want to make three table rows all have a height of 200px. Right now my CSS looks like this:

#resume table tr:nth-child(5){
    height:200px;
}
#resume table tr:nth-child(6){
    height:200px;
}
#resume table tr:nth-child(7){
    height:200px;
}

Is there a simpler way to set the same height for multiple table rows or elements? Here is a fiddle for further explanation: https://jsfiddle.net/gk3o6w3t/2/

Upvotes: 1

Views: 849

Answers (4)

Michael Benjamin
Michael Benjamin

Reputation: 371231

This is what you have in your fiddle demo:

table tr:first-child  { background-color: red; }
table tr:nth-child(2) { background-color: red; }
table tr:nth-child(3) { background-color: red; }
table tr:nth-child(4) { background-color: red; }

So you're targeting the first four rows of the table.

To target the same rows using one line of CSS you can do:

table tr:nth-child(-1n + 4) { background-color: red; }

This calculation represents:

(-1 * 0) + 4 = 4
(-1 * 1) + 4 = 3
(-1 * 2) + 4 = 2
(-1 * 3) + 4 = 1
(-1 * 4) + 4 = 0   /* starting here, the rule is ignored */
(-1 * 5) + 4 = -1  /* negative values are ignored */
       ...
       ...
       ...

Here's the full code:

table{
  background-color:blue;
}

table tr:nth-child(-1n + 4){
  background-color:red;
};
<table>
  <th>My table</th>
  <tr>
    <td>first row</td>
  </tr>
  <tr>
    <td>second row</td>
  </tr>
  <tr>
    <td>third row</td>
  </tr>
</table>

Revised Fiddle

Upvotes: 1

Oriol
Oriol

Reputation: 288120

If you want to match all children between the i-th and the j-th (inclusive), you can use the selector

:nth-child(n+i):nth-child(-n+j)

Replace i and j with numbers. For example, in your case, to select 5th,6th,7th children, use

:nth-child(n+5):nth-child(-n+7)


li:nth-child(n+5):nth-child(-n+7) {
  background: green;
}
<ol>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ol>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105903

You may use :not() to filter a few sibblings rows.

table tr:nth-child(5) ~ tr:not(:nth-child(1n+8)){/* from 5 untill it reaches the eighth and sibblings */
  height:30px;
  background:lime;
}
<table>
  <thead>
    <tr>
      <th>th</th>
      <th>th</th>
      <th>th</th>
      <th>th</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

unalignedmemoryaccess
unalignedmemoryaccess

Reputation: 7441

Try this way:

#resume table tr:nth-child(5),
#resume table tr:nth-child(6),
#resume table tr:nth-child(7) {
    height:200px;
}

Now all elements have the same settings.

Upvotes: 1

Related Questions