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;
    font-weight: bold;
    color: #76818a;
    border-bottom: 1px solid #76818a;
    border-left: 1px solid #76818a;
    white-space: nowrap;
    overflow: hidden;
}

Exactly what elements does that select?

I thought that it should select all the th and td elements inside a table having the class table_legenda.

However, when I test it, the style also gets applied to td elements inside other tables that do not have the table_legenda class (but do have another class).

Why does that happen? What am I missing?

you need to use this selector : .table_legenda th, .table_legenda td. — web-tiki
– web-tiki, Commented Dec 5, 2014 at 11:57

Quentin · Accepted Answer · 2014-12-05 11:57:57Z

5

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 {}
}

answered Dec 5, 2014 at 11:57

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

clement · Accepted Answer · 2014-12-05 11:58:14Z

-1

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

answered Dec 5, 2014 at 11:58

clement

4,27610 gold badges67 silver badges138 bronze badges

Comments

Martijn Visser · Accepted Answer · 2014-12-05 12:01:42Z

-2

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;
}

answered Dec 5, 2014 at 12:01

Martijn Visser

11 bronze badge

Collectives™ on Stack Overflow

What exactly does this CSS selector with a comma match?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related