0

I have such HTML:

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

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 style only for the TD.

Stickers
  • 75,527
  • 23
  • 147
  • 186
Vladyslav Kurkotov
  • 495
  • 8
  • 21
  • 2
    Possible duplicate of [Apply style to parent if it has child with css](http://stackoverflow.com/questions/21252551/apply-style-to-parent-if-it-has-child-with-css) – Chris G Jan 26 '16 at 15:46
  • You can't do this. CSS cascades downward. You would need to modify the child ``'s style to override anything you did in its parent ``, or put the styling that you don't want to cascade in a sibling element instead of a parent (`styled textunstyled text`). – Daniel Beck Jan 26 '16 at 16:16

2 Answers2

2

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
1

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");
tohood87
  • 708
  • 3
  • 15
  • Thank you for answer, but if I could do so, I would not have asked you. – Vladyslav Kurkotov Jan 26 '16 at 15:53
  • In regards to pure CSS here's an interesting page about parent selectors in CSS: https://css-tricks.com/parent-selectors-in-css/ - it was thought about a few years back but was never put in place due to performance concerns etc. I can't think of a CSS way of achieving what you require. – tohood87 Jan 26 '16 at 16:01