CODEWITHSUNDEEP
csscss-selectors
Neil
Neil

Reputation: 5188

CSS pseudo selectors using first-child

I know I could do this easily by specifying an id but I want to practice with pseudo selectors.

I have two tables within a view. Using pseudo selectors:

My current implementation almost works. The issue is that it does this styling for every table in the view. I want this styling to happen only for the first table.

tbody tr:first-child {
  color: red; 
}
<table>
  <thead>
    <tr>
      <th>First Column</th>
      <th>Second Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> T1 R1 Col 1</td>
      <td>This row should all be red</td>
    </tr>
    <tr>
      <td>T1 R2 Col 1</td>
      <td>foobar</td>
    </tr>
  </tbody>
</table>

<br>

<table>
  <thead>
    <tr>
      <th>First Column</th>
      <th>Second Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> T2 R1 Col 1</td>
      <td>This row should NOT be red</td>
    </tr>
    <tr>
      <td>T2 R2 Col 1</td>
      <td>foobar</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Views: 1761

Answers (3)

NathanJrT
NathanJrT

Reputation: 11

Wrap the tables in a container element and then apply this CSS

.container > :first-child tr:first-child td:last-child {
  
  color: red;
  
  }
<div class="container">
<table>
  <thead>
    <tr>
      <th>First Column</th>
      <th>Second Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> T1 R1 Col 1</td>
      <td>This row should all be red</td>
    </tr>
    <tr>
      <td>T1 R2 Col 1</td>
      <td>foobar</td>
    </tr>
  </tbody>
</table>

<br>

<table>
  <thead>
    <tr>
      <th>First Column</th>
      <th>Second Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> T2 R1 Col 1</td>
      <td>This row should NOT be red</td>
    </tr>
    <tr>
      <td>T2 R2 Col 1</td>
      <td>foobar</td>
    </tr>
  </tbody>
</table>
  </div>

Note: This will apply the CSS to the first table in every .container element. Just specify an ID instead and it shouldn't be a problem

Upvotes: 0

ebriggs
ebriggs

Reputation: 1216

You could take it a step further with the pseudo selectors since you already know you're targeting the first table and use :first-of-type which works similarly as :nth-of-type(1)

table:first-of-type tbody tr:first-child {
  color: red; 
}

<table>
  <thead>
    <tr>
      <th>First Column</th>
      <th>Second Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> T1 R1 Col 1</td>
      <td>This row should all be red</td>
    </tr>
    <tr>
      <td>T1 R2 Col 1</td>
      <td>foobar</td>
    </tr>
  </tbody>
</table>

<br>

<table>
  <thead>
    <tr>
      <th>First Column</th>
      <th>Second Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> T2 R1 Col 1</td>
      <td>This row should NOT be red</td>
    </tr>
    <tr>
      <td>T2 R2 Col 1</td>
      <td>foobar</td>
    </tr>
  </tbody>
</table>

Upvotes: 3

Sergio Tx
Sergio Tx

Reputation: 3878

Use another pseudo selector for the table:

table:nth-of-type(1) tbody tr:first-child {
  color: red; 
}
<table>
  <thead>
    <tr>
      <th>First Column</th>
      <th>Second Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> T1 R1 Col 1</td>
      <td>This row should all be red</td>
    </tr>
    <tr>
      <td>T1 R2 Col 1</td>
      <td>foobar</td>
    </tr>
  </tbody>
</table>

<br>

<table>
  <thead>
    <tr>
      <th>First Column</th>
      <th>Second Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> T2 R1 Col 1</td>
      <td>This row should NOT be red</td>
    </tr>
    <tr>
      <td>T2 R2 Col 1</td>
      <td>foobar</td>
    </tr>
  </tbody>
</table>

Upvotes: 5

Related Questions