Merge CSS declarations in one, possible? - html

Question

I am trying to face a little problem i have encountered with.
I am designing a map in leaflet. What i want to achieve is add a HTML label above each marker in a leaflet map, like in this photoshoped example:
Ok the code for each label to display it is:
HTML
<table>
<tr>
<td class="red"></td>
<td class="yellow"></td>
<td class="orange"></td>
<td class="blue"></td>
</tr>
</table>
CSS
table{
border-collapse: collapse;
}
td{
padding:20px;
border:5px solid black;
}
.red{
background-color:#F15E66;
}
.yellow{
background-color:#FFDB64;
}
.orange{
background-color:#F58326;
}
.blue{
background-color:#85B1DE;
}
check https://jsfiddle.net/YameenYasin/cx1ka3Ly/ for the live code.
Ok the problem comes when leaflet labels only allow to add one unique CSS entry for each label. Example:
marker.bindLabel('<table><tr><td class="red"></td><td class="yellow"></td><td class="orange"></td><td class="blue"></td></tr></table>',
{noHide: true, className: "onlyone", offset: [-10, -40] });
Notice the className: "onlyone" property. I can only put one css there and the "class" tags added in the html code are not executed (they do not work).
My conclusion is that i need to add all the CSS code in only one classname called "onlyone" so that then i can do className: "onlyone".
Is this possible?
Regards,

Answer 1

It's possible to add a single class to the tr and then target the children by 'number' using nth-child as follows.
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 5px solid black;
}
.multi td:nth-child(1) {
background-color: #F15E66;
}
.multi td:nth-child(2) {
background-color: #FFDB64;
}
.multi td:nth-child(3) {
background-color: #F58326;
}
.multi td:nth-child(4) {
background-color: #85B1DE;
}
<table>
<tr class="multi">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Answer 2

Here you are:
https://jsfiddle.net/cx1ka3Ly/2/
table{
border-collapse: collapse;
}
td{
padding:20px;
border:5px solid black;
}
.onlyone:nth-child(1){
background-color:#F15E66;
}
.onlyone:nth-child(2){
background-color:#FFDB64;
}
.onlyone:nth-child(3){
background-color:#F58326;
}
.onlyone:nth-child(4){
background-color:#85B1DE;
}