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
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.
* are usually frowned upon for performance reasons, in this case td * would also work if you want to keep the initial style for every child element (without having to list them in the :is()) and only style direct text-node children.My simplest suggestion would be:
td would get small-caps style.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>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.
