CSS: How to refer to a tag

Question

I know how to refer to a tag with an id or class in css

 <table id="cooltable">
      <tr>
          <td></td>
          <td></td>
      </tr>
 </table>

so in css, u refer this <table> by

 table#cooltable{
     ...
 }

However, if I want to refer the <td> in <table> in css, how do I that?

Answer 1

#cooltable td

or

#cooltable tr

Answer 2

table#cooltable td {
    /* css goes here */
}

Answer 3

In CSS, the space character on its own means "descendant". For example, this refers to every td that is a descendant of table#cooltable:

table#cooltable td {
    ...
}

You can also use the > operator: this is more strict, and only applies to direct children. To achieve the same effect using this, you would write:

table#cooltable > tr > td {
    ...
}

In this case, I'd prefer the first option, but there are some situations—multiple layers of <div> tags, for example, or nested tables, where this is a very useful tool.