How to style first table cell in Vanilla Extract?

Question

I am trying to make a rounded <tbody> in Vanilla Extract but having a hard time understanding how to select specific children.

How does one select tbody tr:first-child td:first-child?

table {
  border-collapse: separate;
}

tbody td {
  border-width: 5px;
  border-color: red;
  border-style: solid;
}

tbody tr:first-child td:first-child {
  border-color: black;
  color: white;
  background-color: red;
  border-radius: 1rem 0 0 0;
}

<table>
  <thead>
    <tr>
      <td>Wong</td>
        <td>Loo</td>
      <td>See</td>
      </tr>
  </thead>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>Son</td>
      <td>Woo</td>
      <td>Bee</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>Soon</td>
      <td>Tree</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td colspan="2">$1 million</td>
    </tr>
  </tfoot>
</table>

@DavidThomas Styling the edges of the tbody individually. So the first step is to style only the first ‘td’. — ViktorMS, Jun 25 '23 at 10:32
I thought the title explained it pretty well, what do you suggest? @DavidThomas — ViktorMS, Jun 25 '23 at 10:37

score 0 · Accepted Answer · answered Jun 25 '23 at 12:56

So it turns out globalStyle works to achieve this:

export const topLeftRounded = style({});

globalStyle(`${topLeftRounded}:first-child td:first-child`, {
  borderRadius: "1rem 0 0 0",
});

<tr className={`${topLeftRounded}`}>
  <td>
    This would be
  </td>
</tr>
<tr className={`${topLeftRounded}`}>
  <td>
    rendered in a loop
  </td>
</tr>
<tr className={`${topLeftRounded}`}>
  <td>
    but only the first td would apply the style
  </td>
</tr>

All four corners

Would look something like this

const topLeftRounded = style({});
const topRightRounded = style({});
const bottomLeftRounded = style({});
const bottomRightRounded = style({});

globalStyle(`${topLeftRounded}:first-child td:first-child`, {
  borderRadius: "0.5rem 0 0 0",
});

globalStyle(`${topRightRounded}:first-child td:last-child`, {
  borderRadius: "0 0.5rem 0 0",
});

globalStyle(`${bottomLeftRounded}:last-child td:first-child`, {
  borderRadius: "0 0 0 0.5rem",
});

globalStyle(`${bottomRightRounded}:last-child td:last-child`, {
  borderRadius: "0 0 0.5rem 0",
});

export const rounded = `${topLeftRounded} ${topRightRounded} ${bottomLeftRounded} ${bottomRightRounded}`;

How to style first table cell in Vanilla Extract?

1 Answers1

All four corners