What exactly does this CSS selector with a comma match?

Question

I have a question about CSS selectors.

In my CSS file I have the following code:

.table_legenda th, td {
    text-align: left;
    vertical-align: top;
          


        

Answer 1

The , means selecting another attribute so what you should do is:

.table_legenda th,.table_legenda td {
text-align: left;
vertical-align: top;
font-weight: bold;
color: #76818a;
border-bottom: 1px solid #76818a;
border-left: 1px solid #76818a;
white-space: nowrap;
overflow: hidden;
}

Answer 2

You are misunderstanding the precedence of the comma.

.table_legenda th, td {}

is equivalent to:

.table_legenda th {}
td {}

and not to:

.table_legenda th {}
.table_legenda td {}

---

You need to specify the complete selector each time you have a comma:

.table_legenda th,
.table_legenda td {}

---

A preprocessing tool such as SASS can give you alternative syntax:

.table_legenda {
    th, td {}
}

Answer 3

it selects tr inside table_legenda class , and in addition to that, all td.

The selector you want is

.table_legenda th, .table_legenda td

In this one, it selects all the th inside .table_legenda and all td inside .table_legenda