Search code examples
css-selectorsoverriding

CSS selector confusion

I have a table with a style set TD thus .table-layout td

This set the style for all TD elements of the table of the class table-layout, understood and works.

I want to override the style for certain TD elements in that table, I have tried various ways to do that with a selector none work. I have set it with a style tag on the element which works but is not very friendly.

I would have thought that .table-layout td .override-style would work but no, tried other was but could come up with none that had any effect.

Obviously not understanding something somewhere, can you please put me out of my misery and tell me how or why its not possible so my ignorance can be reduced?

Have tried googling, but nothing found shed and illumination might be an issue with my ability to google.

Many thnaks.

Solution

  • If you want do style a column of a table by global td you could use the :nth-child() pseudo class on td, or you could give the specific data fields an id or if multiple with the same stylesheet a class which you can reference in your css.

    If you want to reference a single table data field by :nth-child() you have also to reference the row tr becaus :nth-child() starts counting the elements based on tr so it will start at each tr again.

    /* First row 2nd td element */
.table-layout tr:nth-child(1) td:nth-child(2){}

/* For all td elements in 2nd row */
.table-layout tr:nth-child(2) td{}

/* For all td elements in 2nd column */
.table-layout td:nth-child(2){}

    Example code

    <html>
  <head>
    <style>
      /* global stylesheet */
      .table-layout td {
        width: 80px;
        font-size: 20px;
      }

      /* style for all td elements in 2nd column */
      .table-layout td:nth-child(2) {
        background-color: red;
      }

      /* style for 3rd td element in 2nd colum */
      .table-layout tr:nth-child(2) td:nth-child(3) {
        background-color: green;
      }

      /* style for all tds with class .style2 */
      .table-layout td.style2 {
        background-color: blue;
      }

      /* style for the td with id #styleid */
      .table-layout td#styleid {
        background-color: orange;
      }

    </style>
  </head>
  <body>
    <div class="table-layout">
      <table>
        <tr>
          <td class="style2">Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td class="style2">Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
        </tr>
        <tr>
          <td class="style2">Data 7</td>
          <td>Data 8</td>
          <td class="style2" id="styleid">Data 9</td>
        </tr>
      </table>
    </div>
  </body>
</html>

    JSFiddle Example