Apply css td/th to all tables of class "foo"

Question

I found a simple way to show a thin border around a html table:

https://www.w3schools.com/css/css_table.asp

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

Now I want to apply this only to all tables with class "foo".

I tried this, but this does not work:

table.foo {
  border-collapse: collapse;
}

table.foo, th, td {
  border: 1px solid black;
}

This changes the style of all td tags. But I want only the td tags directly below a "foo" table.

What is the right way to do this?

Answer 1

Make CSS selection like...

table.foo, table.foo th, table.foo td {
    ....

Also here is a quick check for selectors.

https://www.w3schools.com/cssref/css_selectors.asp

Answer 2

Comma separator mean will apply style separately

Use:

table.foo td

Then will apply to all td under table with class foo

The space mean descendant of any level.