How to create a CSS selector depends on which HTML tag / text node the targeted element contains.

<td>Some text yada yada yada yada</td>
<td><input type="text"></td>
<td>Some more text yada yada yada yada</td>

with

td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

If the window size is correct (at least in Chrome 92), an ellipse appears after the text box – although the full text box is already shown, and there is no white space between it and the closing </td> Tag.

I want to be able to explain with CSS lines.

td:has(:textnode){overflow:hidden;text-overflow:ellipsis}

Or

td:only(input){text-overflow:unset}

None of that works, but is there an existing option that will do what I want, lacking in putting. id/class On td Tags?

Thanks

Leave a Reply

Your email address will not be published.