The nth-last-child pseudo-class for CSS represents elements that are among An+Bth elements from the list composed of their inclusive siblings that match the selector list S, counting backwards from the end.
If S is omitted, it defaults to *|*.
selector:nth-last-child(An+B [of S]? )
{
property: value;
}
<!doctype html>
<html>
<head>
<style>
table, td
{
border-style: solid;
}
tr:nth-last-child(2n+1 of .myclass)
{
background-color: yellow;
}
.myclass
{
background-color: lightyellow;
}
</style>
</head>
<body>
<table>
<tr>
<td>of S</td>
<td>of S</td>
<td>of S</td>
<td>of S</td>
</tr>
<tr>
<td>of S</td>
<td>of S</td>
<td>of S</td>
<td>of S</td>
</tr>
<tr class="myclass">
<td>of S</td>
<td>of S</td>
<td>of S</td>
<td>of S</td>
</tr>
<tr class="myclass">
<td>of S</td>
<td>of S</td>
<td>of S</td>
<td>of S</td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
table, td
{
border-style: solid;
}
tr:nth-last-child(even)
{
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr>
<td>even</td>
<td>even</td>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td>even</td>
<td>even</td>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td>even</td>
<td>even</td>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td>even</td>
<td>even</td>
<td>even</td>
<td>even</td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
table, td
{
border-style: solid;
}
tr:nth-last-child(odd)
{
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr>
<td>odd</td>
<td>odd</td>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td>odd</td>
<td>odd</td>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td>odd</td>
<td>odd</td>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td>odd</td>
<td>odd</td>
<td>odd</td>
<td>odd</td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
table, td
{
border-style: solid;
}
tr:nth-last-child(2n+1)
{
background-color: var(--myvar);
}
</style>
</head>
<body>
<button>initial</button>
<button value="yellow">value</button><br>
<table>
<tr>
<td>An+B</td>
<td>An+B</td>
<td>An+B</td>
<td>An+B</td>
</tr>
<tr>
<td>An+B</td>
<td>An+B</td>
<td>An+B</td>
<td>An+B</td>
</tr>
<tr>
<td>An+B</td>
<td>An+B</td>
<td>An+B</td>
<td>An+B</td>
</tr>
<tr>
<td>An+B</td>
<td>An+B</td>
<td>An+B</td>
<td>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-child(2n+1 of .myclass)
{
background-color: var(--myvar1);
}
.myclass
{
background-color: var(--myvar2);
}
</style>
</head>
<body>
<button>initial</button>
<button value="yellow lightyellow">value</button><br>
<table>
<tr>
<td>of S</td>
<td>of S</td>
<td>of S</td>
<td>of S</td>
</tr>
<tr>
<td>of S</td>
<td>of S</td>
<td>of S</td>
<td>of S</td>
</tr>
<tr class="myclass">
<td>of S</td>
<td>of S</td>
<td>of S</td>
<td>of S</td>
</tr>
<tr class="myclass">
<td>of S</td>
<td>of S</td>
<td>of S</td>
<td>of S</td>
</tr>
</table>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
let myvalue1 = myvalue2 = myproperty;
if(myproperty.indexOf(" "))
{
const myvalue = myproperty.split(" ");
myvalue1 = myvalue[0];
myvalue2 = myvalue[1];
}
const mystyle = document.querySelector(":root").style;
mystyle.setProperty("--myvar1", myvalue1);
mystyle.setProperty("--myvar2", myvalue2);
}
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-child(even)
{
background-color: var(--myvar);
}
</style>
</head>
<body>
<button>initial</button>
<button value="yellow">value</button><br>
<table>
<tr>
<td>even</td>
<td>even</td>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td>even</td>
<td>even</td>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td>even</td>
<td>even</td>
<td>even</td>
<td>even</td>
</tr>
<tr>
<td>even</td>
<td>even</td>
<td>even</td>
<td>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-child(odd)
{
background-color: var(--myvar);
}
</style>
</head>
<body>
<button>initial</button>
<button value="yellow">value</button><br>
<table>
<tr>
<td>odd</td>
<td>odd</td>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td>odd</td>
<td>odd</td>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td>odd</td>
<td>odd</td>
<td>odd</td>
<td>odd</td>
</tr>
<tr>
<td>odd</td>
<td>odd</td>
<td>odd</td>
<td>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>