Can CSS do a conditional max-width or min-width for objects themselves?

Question

Without using JavaScript, is there a way in CSS to say something like "whitespace: nowrap" specifically for td but only if the td has a max-width of a certain size?

I know you can do @media to do css only for certain screen sizes. I want to have the css only apply when a particular object is a certain size.

Answer 1

You would need JavaScript to do exactly what you want, but there is a possibility:

Let's say that you applied a class to some <td>s:

<td class="changed">...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td class="changed">...</td>
<td>...</td>

And you gave .changed a certain max-width:

.changed {
    max-width: 100px;
}

Then, you would be able to do what you want:

td:not(.changed) {
    /*Some styling*/
}