Change the color of all the td inside a table class in CSS

Question

I am trying to select all the bottom borders inside a table, and turn them gray, without having to assign a class to each td. So far what I have come up with is this, but it does not work:

table.items {
    border: 1px solid #42536f;
}

table.items > td {
    border-bottom: 1px solid #CCC;
}

Basically, I want to be able to just use the "items" class for the entire table, and have all the bottom borders show up gray, and the outside border show up that dark blueish color I chose.

Any suggestions?

Thank you :-)

Answer 1

td is not the direct child of the table

table.items{ 
    border:1px solid #42536f;
}
table.items td{ 
    border-bottom:1px solid #CCC;
}

Here all td elements inside the table will select.

or

table.items{
    border:1px solid #42536f;
}
table.items>tr>td{
    border-bottom:1px solid #CCC;
}

In this case td is direct child of tr and tr is direct child of table.