Apply style to only first level of td tags

CssCss Selectors

Css Problem Overview

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 Solutions

Solution 1 - Css

> 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.

Solution 2 - Css

how about using the CSS :first-child pseudo-class:

.MyClass td:first-child { border: solid 1px red; }

Solution 3 - Css

This style:

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

gives me:

this

However, using a class is probably the right approach here.

Solution 4 - Css

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.)

Solution 5 - Css

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>

Solution 6 - Css

I think, It will work.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

Solution 7 - Css

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.

Categories
Recommended Css Solutions
Recommended Css Selectors Solutions

Previous Solution:

Java : How to determine the correct charset encoding of a stream

JavaFileEncodingStreamCharacter Encoding

Next Solution:

Do I need to convert .CER to .CRT for Apache SSL certificates? If so, how?

ApacheSsl

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRichCView Question on Stackoverflow
Solution 1 - CssbobinceView Answer on Stackoverflow
Solution 2 - Cssaviko olooView Answer on Stackoverflow
Solution 3 - CssNick PrestaView Answer on Stackoverflow
Solution 4 - CssChuckView Answer on Stackoverflow
Solution 5 - CsspruleView Answer on Stackoverflow
Solution 6 - CssumaView Answer on Stackoverflow
Solution 7 - CssSimon BuchanView Answer on Stackoverflow