Applying CSS to specific elements-CodePudding

I want to use font-variant: small-caps on the text of a TD

When I use the following it applies small-caps to everything within the TD

td {
font-variant: small-caps;
}

I only want to to apply to a TD when it contains text only, not the text relating to a a href or input etc. Normally I'd do this with classes, but I don't have the option in the case.

I've tried:

td:not(a) {
font-variant: small-caps;
}

But that didn't seem to help. Is this possible ?

Thanks

CodePudding user response：

You would need to overwrite the font-variant for children that are anchors etc.

td {
  font-variant: small-caps;
}

// overwrite children style at any level of nesting inside the cell

td a, td input {
  font-variant: initial;
}

// OR alternative syntax to simplify

td :is(a, input) {
  font-variant: initial;
}

// OR for immediate children

td > :is(a, input) {
  font-variant: initial;
}

The issue with your syntax td:not(a) is a cell element (td) cannot also be an anchor (a) element. You can try something similar by separating them (td and :not) with a space to select the children of the cell. It depends on your HTML structure and whether the text only cells have paragraphs where there are no anchors or inputs.

CodePudding user response：

My simplest suggestion would be:

Any text content directly placed inside td would get small-caps style.
Any child element of td that has a text content inside would get initial instead.

Below is a working code snippet. Should you need to include or exclude certain element types, you can further modify CSS selector to accommodate

table {
  border: 1px solid #ddd;
}

td {
  font-variant: small-caps;
  padding: 16px;
}

td>* {
  font-variant: initial;
}

<table>
  <tr>
    <td>
      All text as a direct child
    </td>
    <td>
      <a href="#">All text inside hyperlink</a>
    </td>
  </tr>
  <tr>
    <td>
      <label for="name">
        <input id="name" name-"name" type="text" placeholder="text input..." >
      </label>
    </td>
    <td>
      Part of the text is <a href="#">inside hyperlink</a>
    </td>
  </tr>
</table>

CodePudding user response：

If you did this:

td {font-variant: small-caps}
td * {font-variant:normal}

Then you should get the caps if text is directly within the td, but not caps for text in tags within the td.

CodePudding user response：

Put a space between the parent element and the selected element.

td p {
    font-variant-caps: small-caps;
}