How to find a first td in a tr using tr class name in CSS? [duplicate]

Question

In my application I have a table with more than 7 tr and 3 td in each. For a particular media i want to change one of my td's colspan. For that i add a class name to particular tr now using tht class name of tr i want to find first and last child of that tr. How to do this? With out using any script(jquery/java). I want to do this using only css.

 <table cellspacing="0" cellpadding="0" border="0" style="border- collapse: collapse; width:100%; table-layout:fixed;">
    <tbody>
    <tr>
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
    </tr>
   <tr>
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
    </tr>
     <tr>
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
    </tr>
    <tr class="media">
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
     </tr>
      </tbody>
   </table>

Answer 1

Just do something like below.

.media td:first-of-type {
  background: red;
  }

.media td:last-of-type {
  background: green;
  }

<table cellspacing="0" cellpadding="0" border="0" style="border- collapse: collapse; width:100%; table-layout:fixed;">
    <tbody>
    <tr>
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
    </tr>
   <tr>
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
    </tr>
     <tr>
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
    </tr>
    <tr class="media">
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
     </tr>
      </tbody>
   </table>

Note: If they are going to be styled the same, you can add them together as shown below.

 .media td:last-of-type, .media td:first-of-type {
      background: green;
      }

Answer 2

You can do like this:

.media td:first-child,.media td:last-child{
        background-color: red;
    }

If you want choose a certain td in .media, you can use

//n is the td you want select. n starts from 1
.media td:nth-child(n) {
  background-color: red;
}