Nested table and child selector

HTML & CSS
1

Hey everyone,

I have included two example html files, example_one.html and example_two.html. This first one works very well and avoids styling the li elements that are in a nested ul. However, I apply the same idea with nested tables and nothing gets styled. My CSS I supposed to style only the th elements that are children of the tr element which is a child of the table, with a class of main_section, but nothing happens.

:shifty:
My second solution is applying the style for the all table ths, and overwriting the nested table with a descendent selector. Check out the code I have attached bellow.

2

Hi,

Tables are constructed using tbody (and thead and tfoot where appropriate). If you omit the tbody then that’s ok because the browser puts it in place for you anyway. View your page in Firebug and you will see the structure.

With that in mind you would need this rul to target the element.


	table.main_section>tbody>tr>th {
		border: 1px solid red;
	}

Therefore to avoid ambiguity use tbody in your code anyway :slight_smile:

3

Thanks for the excellent reply, this was what I was looking for!