The nth-last-col pseudo-class for CSS represents a cell element belonging to a column that has An+B-1 columns after it, for any positive integer or zero value of n.
selector:nth-last-col(An+B)
{
property: value;
}
<!doctype html>
<html>
<head>
<style>
table, td
{
border-style: solid;
}
tr:nth-last-col(even)
{
background-color: yellow;
}
</style>
</head>
<body>
<table>
<col span="2">
<col>
<col>
<tr>
<td>even</td>
<td>even</td>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td colspan="2">even</td>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td>even</td>
<td colspan="2">even</td>
<td>even</td>
</tr>
<tr>
<td>even</td>
<td>even</td>
<td colspan="2">even</td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
table, td
{
border-style: solid;
}
tr:nth-last-col(odd)
{
background-color: yellow;
}
</style>
</head>
<body>
<table>
<col span="2">
<col>
<col>
<tr>
<td>odd</td>
<td>odd</td>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td colspan="2">odd</td>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td>odd</td>
<td colspan="2">odd</td>
<td>odd</td>
</tr>
<tr>
<td>odd</td>
<td>odd</td>
<td colspan="2">odd</td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
table, td
{
border-style: solid;
}
tr:nth-last-col(2n+1)
{
background-color: var(--myvar);
}
</style>
</head>
<body>
<button>initial</button>
<button value="yellow">value</button><br>
<table>
<col span="2">
<col>
<col>
<tr>
<td>An+B</td>
<td>An+B</td>
<td>An+B</td>
<td>An+B</td>
</tr>
<tr>
<td colspan="2">An+B</td>
<td>An+B</td>
<td>An+B</td>
</tr>
<tr>
<td>An+B</td>
<td colspan="2">An+B</td>
<td>An+B</td>
</tr>
<tr>
<td>An+B</td>
<td>An+B</td>
<td colspan="2">An+B</td>
</tr>
</table>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
document.querySelector(":root").style.setProperty("--myvar", myproperty);
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
table, td
{
border-style: solid;
}
tr:nth-last-col(even)
{
background-color: var(--myvar);
}
</style>
</head>
<body>
<button>initial</button>
<button value="yellow">value</button><br>
<table>
<col span="2">
<col>
<col>
<tr>
<td>even</td>
<td>even</td>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td colspan="2">even</td>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td>even</td>
<td colspan="2">even</td>
<td>even</td>
</tr>
<tr>
<td>even</td>
<td>even</td>
<td colspan="2">even</td>
</tr>
</table>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
document.querySelector(":root").style.setProperty("--myvar", myproperty);
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
table, td
{
border-style: solid;
}
tr:nth-last-col(odd)
{
background-color: var(--myvar);
}
</style>
</head>
<body>
<button>initial</button>
<button value="yellow">value</button><br>
<table>
<col span="2">
<col>
<col>
<tr>
<td>odd</td>
<td>odd</td>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td colspan="2">odd</td>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td>odd</td>
<td colspan="2">odd</td>
<td>odd</td>
</tr>
<tr>
<td>odd</td>
<td>odd</td>
<td colspan="2">odd</td>
</tr>
</table>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
document.querySelector(":root").style.setProperty("--myvar", myproperty);
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>