Apply style to only first level of td tags

Question

Is there a way to apply a Class  style to only ONE level of td tags    lt style gt  MyClass td  border  solid 1px red   lt  style gt    lt table class  MyClass  gt     lt tr gt       lt td gt        THIS SHOULD HAVE RED BORDERS      lt  td gt       lt td gt        THIS SHOULD HAVE RED BORDERS        lt table gt  lt tr gt  lt td gt THIS SHOULD NOT HAVE ANY lt  td gt  lt  tr gt  lt  table gt       lt  td gt     lt  tr gt   lt  table gt

User · Answer

I wanted to set the width of the first column of the table, and I found this worked (in FF7) - the first column is 50px wide:

#MyTable>thead>tr>th:first-child { width:50px;}

where my markup was

<table id="MyTable">
 <thead>
  <tr>
   <th scope="col">Col1</th>
   <th scope="col">Col2</th>
  </tr>
 </thead>
 <tbody>
   ...
 </tbody>
</table>

User · Answer

This style   table tr td   border  1px solid red    td table tr td   border  none      gives me   this http   img12 imageshack us img12 4477 borders png  However  using a class is probably the right approach here

User · Answer

I think  It will work    Myclass tr td first-child      or    Myclass td first-child

User · Answer

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 · Answer

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

User · Answer

Is there a way to apply a Class  style to only ONE level of td tags    Yes     MyClass gt tbody gt tr gt td   border  solid 1px red      But  The     gt     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 · Answer

how about using the CSS  first-child pseudo-class    MyClass td first-child   border  solid 1px red

[css] Apply style to only first level of td tags

Examples related to css

Examples related to css-selectors