How To Apply Style Only To The Parent Element?

I have such HTML: How can I write style for TD element, that will not affect child SPAN element? In my case SPAN must stay in normal text transform. Note that I can modify the sty

Solution 1:

The default style for the span is text-transform: inherit.

There is no way to change the style of its parent without it inheriting other than to explicitly set it to a different value.

Solution 2:

CSS:

td span {
    text-transform:none;
}

Inline CSS:

<table>
  <tr>
    <td style="text-transform: uppercase;">
      Some text node.
      <span style="text-transform: none;">Some text in span</span>    
    </td>
  </tr>
</table>

JS:

$("td span").css("text-transform", "none");