Question 305946 in Html Question posted in
Some basic documentation can be found here.

Html – Select and change style to a specific th or td

I would like to change font for specific <th> or <td> elements.

The code:

table,
th,
td {
  border: 3px solid white;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
}

body {
  color: white;
  background-color: black;
}
<table>
  <tr>
    <td>dummy</td>
    <td>dummy</td>
    <td>dummy</td>
    <td>dummy</td>        
  </tr>
  <tr>
    <td>dummy</td>
    <!--Part need to change style from this line-->
    <td>dummy</td>
    <td>dummy</td>
    <td>dummy</td>
    <!--to this line-->
  </tr>
</table>

The comment part is to select the specific td then end select at the last comment.

Tags:

2

Answers


  1. 0

    You can use tr:last-child td:not(:first-child) selector to target the table cells (except the first one) in the last row:

    tr:last-child td:not(:first-child) {
  background-color: #ff07;
}

table,
th,
td {
  border: 3px solid white;
  border-collapse: collapse;
}

body {
  color: white;
  background-color: black;
}
    <table>
  <tr>
    <th>dum</th>
    <th>dum</th>
    <th>dum</th>
    <th>dum</th>
    <th>dum</th>
    <th>dum</th>
    <th>dum</th>
    <th>dum</th>
  </tr>
  <tr>
    <td>dum</td>
    <td>dum</td>
    <td>dum</td>
    <td>dum</td>
    <td>dum</td>
    <td>dum</td>
    <td>dum</td>
    <td>dum</td>
  </tr>
  <tr>
    <td>dum</td>
    <!--Part need to change style from this line-->
   <td>dum 1</td>
    <td>dum 2</td>
    <td>dum 3</td>
    <td>dum 4</td>
    <td>dum 5</td>
    <td>dum 6</td>
    <td>dum 7</td>
   <!--to this line-->
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    Hope, this helps. Use nth-child and learn how to use it as selector.

    table,
th,
td {
  border: 3px solid white;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
}

body {
  color: white;
  background-color: black;
}

tr:nth-of-type(2) td:nth-of-type(2) {background:yellow; font-family: 'comic sans ms'}
tr:nth-of-type(2) td:nth-of-type(3) {background:pink; font-family: 'comic sans ms'}
tr:nth-of-type(2) td:nth-of-type(4) {background:blue; font-family: 'times new roman'}
    <table>
  <tr>
    <td>dummy</td>
    <td>dummy</td>
    <td>dummy</td>
    <td>dummy</td>        
  </tr>
  <tr>
    <td>dummy</td>
    <!--Part need to change style from this line-->
    <td>dummy</td>
    <td>dummy</td>
    <td>dummy</td>
    <!--to this line-->
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search