Using multiple ">" CSS selectors

Question

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 ?

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
– Toni Leigh, Commented Nov 4, 2015 at 12:33
@ToniLeigh the inner table is not mine (it's a third party date picker) — yannick1976
– yannick1976, Commented Nov 4, 2015 at 12:35
I'd probably try a class on the lowest level thing you control then (a <td> by looks of it) — Toni Leigh
– Toni Leigh, Commented Nov 4, 2015 at 12:36
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
– Toni Leigh, Commented Nov 4, 2015 at 12:38

T.J. Crowder · Accepted Answer · 2015-11-04 12:40:02Z

18

There are two aspects to what's going on:

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

edited Nov 4, 2015 at 12:40

answered Nov 4, 2015 at 12:18

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

yannick1976 Over a year ago

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

T.J. Crowder Over a year 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.

Patrick Roberts Over a year 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?

T.J. Crowder Over a year ago

@PatrickRoberts: Not according to the spec, no. I don't even see anything like that in the latest snapshot.

transistor09 Over a year ago

Why not just use .first as selector in the second example?

|

Rohit Azad Malik · Accepted Answer · 2015-11-04 12:27:30Z

2

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

edited Nov 4, 2015 at 12:27

answered Nov 4, 2015 at 12:16

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

4 Comments

Jonathan Lam Over a year ago

This still highlights but not to this

T.J. Crowder Over a year ago

Moreover, code/markup without explanation is usually not useful.

KittMedia Over a year ago

There is no tbody in your HTML but on your CSS… Thats weird.

T.J. Crowder Over a year 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.

Matthijs van Hest · Accepted Answer · 2015-11-04 14:25:22Z

2

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

edited Nov 4, 2015 at 14:25

answered Nov 4, 2015 at 12:51

Matthijs van Hest

7891 gold badge6 silver badges12 bronze badges

Comments

Mephy · Accepted Answer · 2015-11-04 21:23:21Z

2

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>

edited Nov 4, 2015 at 21:23

Mephy

3,0314 gold badges27 silver badges32 bronze badges

answered Nov 4, 2015 at 12:40

Bidstrup

1,6172 gold badges17 silver badges33 bronze badges

2 Comments

yannick1976 Over a year ago

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.

Bidstrup Over a year ago

True if you add another first-level td, then this dosnt work, i only looked at your example :)

Collectives™ on Stack Overflow

Using multiple ">" CSS selectors

4 Answers 4

7 Comments

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related