Comma in CSS, multiple selectors using the same CSS

Question

Hi, I got following CSS:

.Resource table.Tbl td
{ /* some css*/ }

.Resource table.Tbl td.num
{ /* some css 2*/ }

.Resource table.Tbl td.num span.icon
{ /* some css 3*/ }

.Resource table.Tbl2 td
{ /* some css*/ }

.Resource table.Tbl2 td.num
{ /* some css 2*/ }

.Resource table.Tbl2 td.num span.icon
{ /* some css 3*/ }

where the CSS for Tbl and Tbl2 should be the same.

.Resource table.Tbl, table.Tbl2 td { /* some css*/ }

doesn't work.

How can I achieve this, without duplicating whole line?

Answer 1

.Resource table.Tbl td, .Resource table.Tbl2 td { /* some css */ }

You have to duplicate the stuff before and after table.TblX, because there's no way to group the , operator to have higher precedence than the descendent selector  .

Answer 2

You can't.

Each selector is independent, unfortunately.

It is one of CSS's annoying issues.

You can do it anyway you like and pre-process it with a server side language, so it outputs independent selectors.

LESS is popular.

Answer 3

 .Resource table.Tbl, table.Tbl2 td { /* some css*/ }

you're nearly there. I think you mean

 .Resource table.Tbl td, table.Tbl2 td { /* some css*/ }

note the additional td - you need to specify the full "path" to each element.

CSS pre-processors like LessCSS offer syntax constructs that make dealing with repetitive structures easier.

Answer 4

.Resource table.Tbl td, .Resource table.Tbl2 td { /* some css*/ }

You should add the full ancestor path for both rules. Not just where you see differences.

Answer 5

Why don't you use the same class on both tables? That is what classes are for