css - How to select first and last TD in a row?

Css - How to select first and last TD in a row?

To select the first and last <td> elements in a row using CSS, you can use the :first-child and :last-child pseudo-classes. Here's how you can achieve this:

1. Select First and Last <td> in a Row

If you want to style the first and last <td> elements in each row of a table, you can use these pseudo-classes:

HTML

<table> <tr> <td>First</td> <td>Middle</td> <td>Last</td> </tr> <tr> <td>First</td> <td>Middle</td> <td>Last</td> </tr> </table>

CSS

/* Style the first <td> in each row */ tr td:first-child { background-color: #f0f0f0; font-weight: bold; } /* Style the last <td> in each row */ tr td:last-child { background-color: #d0d0d0; font-weight: bold; }

Explanation

  • tr td:first-child: Selects the first <td> element in each <tr> (row).
  • tr td:last-child: Selects the last <td> element in each <tr> (row).

2. Using nth-child with Specific Selectors

If you want to select the first and last <td> in a specific set of rows or a more complex table structure, you might need to be more specific. For example, if you only want to apply styles to the first and last <td> in rows of a specific table, you can use a class or ID selector.

HTML

<table id="myTable"> <tr> <td>First</td> <td>Middle</td> <td>Last</td> </tr> <tr> <td>First</td> <td>Middle</td> <td>Last</td> </tr> </table>

CSS

/* Select the first <td> in each row of a specific table */ #myTable tr td:first-child { background-color: #f0f0f0; font-weight: bold; } /* Select the last <td> in each row of a specific table */ #myTable tr td:last-child { background-color: #d0d0d0; font-weight: bold; }

Explanation

  • #myTable tr td:first-child: Targets the first <td> in each row of the table with the ID myTable.
  • #myTable tr td:last-child: Targets the last <td> in each row of the table with the ID myTable.

Summary

  • Use first-child and last-child pseudo-classes to select the first and last <td> elements in a row.
  • Combine with tr to target cells within rows.
  • Use additional selectors like IDs or classes for more specific targeting.

These methods allow you to style table cells dynamically and flexibly.

Examples

  1. "CSS select first td in a row"

    • Description: Use the :first-child pseudo-class to select the first td in each row.
    • Code:
      tr td:first-child { background-color: yellow; }

  2. "CSS select last td in a row"

    • Description: Use the :last-child pseudo-class to select the last td in each row.
    • Code:
      tr td:last-child { background-color: yellow; }

  3. "CSS select first and last td in a row"

    • Description: Combine :first-child and :last-child to style both the first and last td elements in each row.
    • Code:
      tr td:first-child, tr td:last-child { background-color: yellow; }

  4. "CSS select first and last td in every table row"

    • Description: Use tr to ensure the selection applies to every row in a table.
    • Code:
      table tr td:first-child, table tr td:last-child { background-color: yellow; }

  5. "CSS select first and last td in a specific table row"

    • Description: Use a class selector to apply the style to a specific table row.
    • Code:
      .special-row td:first-child, .special-row td:last-child { background-color: yellow; }

  6. "CSS style first and last td in a row differently"

    • Description: Apply different styles to the first and last td in each row.
    • Code:
      tr td:first-child { background-color: yellow; } tr td:last-child { background-color: green; }

  7. "CSS add border to first and last td in a row"

    • Description: Add borders to the first and last td elements in each row.
    • Code:
      tr td:first-child { border-left: 2px solid black; } tr td:last-child { border-right: 2px solid black; }

  8. "CSS change text color of first and last td in a row"

    • Description: Change the text color of the first and last td elements in each row.
    • Code:
      tr td:first-child { color: red; } tr td:last-child { color: blue; }

  9. "CSS apply padding to first and last td in a row"

    • Description: Apply padding to the first and last td elements in each row.
    • Code:
      tr td:first-child { padding-left: 20px; } tr td:last-child { padding-right: 20px; }

  10. "CSS style first and last td in even rows"

    • Description: Use :nth-child(even) to apply styles only to the first and last td elements in even rows.
    • Code:
      tr:nth-child(even) td:first-child { background-color: yellow; } tr:nth-child(even) td:last-child { background-color: green; }

More Tags

git-diff vscode-extensions arcmap qt4 adminer ord binary-search-tree nested-documents strikethrough cp1252

More Programming Questions

More Transportation Calculators

More Biochemistry Calculators

More Dog Calculators

More Mortgage and Real Estate Calculators