Apply style to only first level of td tags

EdenMachine_47167 0
Viewed 250023

Is there a way to apply a Class' style to only ONE level of td tags?

<style>.MyClass td {border: solid 1px red;}</style>

<table class="MyClass">
  <tr>
    <td>
      THIS SHOULD HAVE RED BORDERS
    </td>
    <td>
      THIS SHOULD HAVE RED BORDERS
      <table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table>
    </td>
  </tr>
</table>
css-selectors css
7 Answers

Is there a way to apply a Class' style to only ONE level of td tags?

Yes*:

.MyClass>tbody>tr>td { border: solid 1px red; }

But! The ‘>’ direct-child selector does not work in IE6. If you need to support that browser (which you probably do, alas), all you can do is select the inner element separately and un-set the style:

.MyClass td { border: solid 1px red; }
.MyClass td td { border: none; }

*Note that the first example references a tbody element not found in your HTML. It should have been in your HTML, but browsers are generally ok with leaving it out... they just add it in behind the scenes.

user_189360
user_409060

Just make a selector for tables inside a MyClass.

.MyClass td {border: solid 1px red;}
.MyClass table td {border: none}

(To generically apply to all inner tables, you could also do table table td.)

Chuck_507420

I guess you could try

table tr td { color: red; }
table tr td table tr td { color: black; }

Or

body table tr td { color: red; }

where 'body' is a selector for your table's parent

But classes are most likely the right way to go here.

user_201350
Related