.t2 > tbody
selects <tbody>
elements where the parent is a .t2
class element.
tbody > tr
selects all <tr>
elements where the parent is a <tbody>
element.
tr > th
selects all <th>
elements where the parent is a <tr>
element.
tr > td
selects all <td>
elements where the parent is a <tr>
element.
Although you have not coded <tbody>
explicitly, the browser will add in the <tbody>
when displaying it.

For more info on CSS selectors, please refer to here.
<style>
body {
background-color: skyblue;
}
.t2 > tbody > tr > th,
.t2 > tbody > tr > td {
border: 1px solid white;
}
</style>
<table class="t2">
<tr>
<th>Column 1</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</table>
Using relational selectors (Ones that depend on the ordering of elements on a page) is highly discouraged as they’re easily broken by changes in layout or additions of new page elements. You want to add either a unique ID or custom class so that future changes do not break your previous work.
As far as I’m aware, tr
does not take border styles without using border collapse. See here: Why TR not taking style?
Furthermore, the >
selector in CSS only applies to the immediate children of the indicate style. Since td
and th
are children of the tr
element, they are not being picked up. You may want to use:
.t2 td, th{
border: 1px solid white;
}
instead, which should apply the style to the nested children of .t2
as well.
I have two tables, this is just the 2nd. I want to style the 2nd table without affecting the first table. I also do not want to have to id or create classes for each tag. Visual studio seems to understand what I’m telling it to do but its not translating onto the web page. What am I missing?
<style>
.t2 > tr th td{
border: 1px solid white;
}
</style>
<table class="t2">
<tr>
<th>Column 1</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</table>