Is there a difference between table.class tr, th and table .class tr, th?

For the longest time I was styling my elements in this way.

table .class tr, th{

} 

Today I had some insane css related bugs and it occurred to me that it may have worked in 开发者_如何学编程the past by accident and in fact what it is doing is not selecting tables of a certain class but selecting tables followed by elements of a certain class.

I kind of assumed that css would just ignore the space between table and .class. But does it?

table.class tr, th{

} 

Would this work differently? I can't believe I didn't think about this before! (embarrassed)

Thanks!

table .class tr selects this:

<table>
    <tbody class="class">
        <tr></tr>
    </tbody>
</table>

While table.class tr selects this:

<table class="class">
    <tr></tr>
</table>

You answered it in your question:

table .class tr, th... selects a tr inside a .class element inside a table and a th.

table.class tr, th... selects a tr inside a table with the class "class" and a th.

The space makes a difference.

With the space, you are selecting another element in between the table and the tr (perhaps a thead or tbody?)

Without the space, you are selecting a table with the class class.

BTW, I am not sure you want this, but the , th means "also give these same styles to all ths".

table.foo selects tables with the class foo.

table .foo selects all elements that have the class foo, and are inside a table.

So your selector before:

table .class tr, th selects all trs that are inside an element which has class class and is inside a table, as well as all ths on the page.

table .class tr would select a tr:

<table>
  <tbody class="class">
    <tr></tr>
  </tbody>
</table>

but nothing:

<table class="class">
  <tr></tr>
</table>

While table.class tr would select a tr:

<table class="class">
  <tr></tr>
</table>

AND a tr:

<table class="class">
  <tbody>
    <tr></tr>
  </tbody>
</table>

But nothing:

<table>
  <tbody class="class">
    <tr></tr>
  </tbody>
</table>