Using LESS, can I reference a parent element in nested child elements - css

Question

I have a table, with a header row and numerous data rows. I have a checkbox in the first column. In the th cell, I would like to add a top and bottom margin, on the td cells, I don't want this.
I have LESS(css) that is the same for both the th and td elements with class .col-checkbox, as well as a label element in both cells with shared css. I'd like to add the margin top/bottom to the label if it is in the th cell.
.html file
<table>
<tr>
<th class="col-checkbox">
<div>Column Label</div>
<label class="custom-checkbox">
<input type="checkbox" />
<span class="checkbox"></span>
</label>
</th>
<th>
Unimportant, there are more columns as well
</th>
</tr>
<tr>
<td class="col-checkbox">
<label class="custom-checkbox">
<input type="checkbox" />
<span class="checkbox"></span>
</label>
</td>
<td>
Unimportant, there are more columns as well
</td>
</tr>
</table>
.less file
.col-checkbox {
width: 30px;
// more css here
label.custom-checkbox {
height: 24px;
// more css here
// I know I can do the following, but I'd like to not have to add
// more classes if I can someone make this dependent on whether it
// is in the th or td element
//&.header {
// margin: 6px auto;
//}
//
//&.data {
// margin: 0 auto;
//}
}
}
I know I can make it work the way I have it above, but I was curious if I can do it just by referencing the td and th elements without duplicating the other css. I don't think so, but I figured I'd ask anyway.

Answer 1

It looks like you are already familiar with the & operator. Well it doesn't have to go before the selector. Instead, you can use it after the selector, such as th&, to get what you want.
So this:
.col-checkbox {
width: 30px;
// more css here
label.custom-checkbox {
height: 24px;
// more css here
}
th& {
margin: 10px 0;
}
}
Outputs this:
.col-checkbox {
width: 30px;
}
.col-checkbox label.custom-checkbox {
height: 24px;
}
th.col-checkbox {
margin: 10px 0;
}
However, a word of caution that this pattern may not work as you expect if you have more than one level of nesting.
Consider this code:
.col-checkbox {
width: 30px;
// more css here
label.custom-checkbox {
height: 24px;
// more css here
.checkbox& {
color: navy;
}
}
}
You may expect to get this out of it:
.col-checkbox {
width: 30px;
}
.col-checkbox label.custom-checkbox {
height: 24px;
}
.col-checkbox label.custom-checkbox.checkbox {
color: navy;
}
But in reality you'll get this:
.col-checkbox {
width: 30px;
}
.col-checkbox label.custom-checkbox {
height: 24px;
}
.checkbox.col-checkbox label.custom-checkbox {
color: navy;
}