current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 10 down vote favorite

Given this html :

<table id="my-table">
  <tr>
    <td>
       I want to apply my style to this
    </td>
    <td>
      <table>
        <tr>
          <td>
            But not to this
          </td>
        </tr>
      </table>  
    </td>
  </tr>
</table>

I would like to apply style to the cells that are first level children of the table.

I thought I could use this :

#my-table > tr > td {
    color: #ff0000;
}

... But it doesn't work. Is it because you can't use multiple > selectors ? How can I do it ?

share|improve this question
1  
nested tables? is this a layout, if so, then not using tables will help - also, just using classes on the elements you want to target is much easier than trying to copy HTML structure in css selectors – Toni Leigh 23 hours ago
    
@ToniLeigh the inner table is not mine (it's a third party date picker) – yannick1976 23 hours ago
    
I'd probably try a class on the lowest level thing you control then (a <td> by looks of it) – Toni Leigh 23 hours ago
    
Yes that's what I'll do (sigh) – yannick1976 23 hours ago
    
classes are better anyway, re-usable, not tied to HTML structure or a particular element (when you use a date picker somewhere else you won't have to make sure it's parent is a TD) - 3rd party stuff is awkward though, you might even have to use !important – Toni Leigh 23 hours ago

4 Answers 4

up vote 16 down vote accepted

There are two aspects to what's going on:

  1. The browser will insert a tbody element if you don't include one (or at least, most do, most of the time; I always use an explicit one, so I don't know the edge cases), and so even if you don't have it in your HTML, you need it in your selector if you're using > (the child combinator). That would change your selector to #my-table > tbody > tr > td. (I advocate always including tbody explicitly in the HTML, just to avoid confusion and edge cases.)

  2. The table inside the td inherits its color from the td it's inside. So although your selector targets the correct elements, their descendant elements inherit the color.

You can work around that by giving an explicit color to #my-table td elements, and then the special color only to #my-table > tbody > tr > td elements.

Example (note the tbody in the HTML and also in the selector):

#my-table td {
  color: black;
}
#my-table > tbody > tr > td {
  color: #ff0000;
}
<table id="my-table">
  <tbody>
    <tr>
      <td>
        I want to apply my style to this
      </td>
      <td>
        <table>
          <tr>
            <td>
              But not to this
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

In a comment you've said you don't control the inner table. If you control the outer table, you can solve this by just putting a class on the cells you want to apply the rule to, and then have the rule only apply to tds with that class:

Example (note the tbody in the HTML and also in the selector):

#my-table > tbody > tr > td.first {
  color: #ff0000;
}
<table id="my-table">
  <tbody>
    <tr>
      <td class="first">
        I want to apply my style to this
      </td>
      <td>
        <table>
          <tr>
            <td>
              But not to this
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

share|improve this answer
    
Alas, I can't do it though because the inner table is not mine (it's a third party date picker), and I don't want to duplicate the properties. But it looks like it's as good as it gets... – yannick1976 23 hours ago
    
@yannick1976: Sounds like fun. :-) But the good news is that if you control the outer table but not the inner, there is another approach: Use a class on your first td. I've added an example of that. – T.J. Crowder 23 hours ago
    
I couldn't find a reference to it on MDN so maybe you can't but is it possible to use the value initial on color? – Patrick Roberts 21 hours ago
    
@PatrickRoberts: Not according to the spec, no. I don't even see anything like that in the latest snapshot. – T.J. Crowder 21 hours ago
    
Why not just use .first as selector in the second example? – transistor09 16 hours ago
up vote 2 down vote

Hi now you can try to this way 

#my-table > tbody> tr > td {
    color: #ff0000;
}
#my-table td{color:#000;}
<table id="my-table"><tbody>
  <tr>
    <td>
       I want to apply my style to this
    </td>
    <td>
      <table><tbody>
        <tr>
          <td>
            But not to this
          </td>
        </tr></tbody>
      </table>  
    </td>
  </tr></tbody>
</table>

The tag is used to group the body content in an HTML table.

The element is used in conjunction with the and elements to specify each part of a table (body, header, footer).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

The tag must be used in the following context: As a child of a element, after any , , and elements.

more about tbody

share|improve this answer
3  
This still highlights but not to this – Jonathan 23 hours ago
1  
Moreover, code/markup without explanation is usually not useful. – T.J. Crowder 23 hours ago
1  
There is no tbody in your HTML but on your CSS… Thats weird. – KittMedia 23 hours ago
    
And that quote (if it's a quote) about tbody is Just Plain Wrong when it says "for example, you may choose to set the height of the tbody area to a fixed amount, and let the content in that area scroll, so that the table’s header and footer sections remain visible on screen" If only that were remotely true, cross-browser. – T.J. Crowder 23 hours ago
up vote 2 down vote

color has the property that it's being applied to all of it's childs. Therefor you will need to limit it. You can do this with > and :nth-child(n)

#my-table > tbody > tr > td:nth-child(1) {
    color: #ff0000;
}

Your HTML should have a tbody but it might not be necessary, browsers will create them for you, but it's advised to use tbody yourself.

You can modify this if your tables are getting larger.. for example with using formulas like 3n+1, odd/even etc.. also you can use multiple spaces or > and element tags to specify all your needs. Depending on what you want.

More info about nth-child() here

share|improve this answer
up vote 2 down vote

As far as I see it you need the :first-child as well, otherwise you are stil hitting the last TD, if you want a border on it:

	#my-table > tbody > tr > td:first-child  {
			color: #ff0000;
			border: 1px solid black;
		}
<table id="my-table">
  <tr>
    <td>
      I want to apply my style to this
    </td>
    <td>
      <table>
        <tr>
          <td>
            But not to this
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

share|improve this answer
    
This doesn't work. :first-child targets the first child by order, not by nesting level. If I have another first-level td, the style is not applied to it. – yannick1976 23 hours ago
    
True if you add another first-level td, then this dosnt work, i only looked at your example :) – Rasmus Bidstrup 23 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.