CSS :nth-last-of-type() Pseudo clase
La pseudo clase :nth-last-of-type() selecciona elementos basándose en su índice comenzando desde el último elemento hacia arriba.
:nth-last-of-type() puede especificarse mediante un número, una palabra clave o una fórmula.
| Value | Description | |-- -----|-------------| | number | Coincide con el elemento exacto enésimo desde el final. | | odd / even | Coincide con elementos en posiciones impares o pares desde el final. | | an + b | Coincide con elementos en posiciones calculadas por la fórmula an + b, donde a y b son enteros y n es un contador que comienza desde 0. |
La pseudo clase :nth-last-of-type() es similar a :nth-of-type(), pero hay una diferencia: cuenta los elementos desde el final, mientras que :nth-of-type() los cuenta desde el principio.
Esta pseudo clase también es similar a :nth-last-child, pero difieren en lo que coinciden: :nth-last-of-type() apunta a un tipo de elemento específico entre sus hermanos, mientras que :nth-last-child() coincide con cualquier tipo de elemento en la posición dada. Ambas tienen la misma especificidad.
Versión
Sintaxis
Sintaxis de CSS :nth-last-of-type()
:nth-last-of-type( <nth> ) {
css declarations;
}Ejemplo de la pseudo clase :nth-last-of-type():
Ejemplo de código CSS :nth-last-of-type()
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(3) {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:nth-last-of-type() selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</body>
</html>Ejemplo de la pseudo clase :nth-last-of-type() con "odd" y "even":
Otro ejemplo de código CSS :nth-last-of-type()
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(odd) {
background: #1c87c9;
color: #eeeeee;
}
p:nth-last-child(even) {
background: #666666;
color: #eeeeee;
}
</style>
</head>
<body>
<h2>:nth-last-of-type selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</body>
</html>Ejemplo de la pseudo clase :nth-last-of-type() con una fórmula (an + b):
Ejemplo HTML/CSS de la pseudo clase :nth-last-of-type() con una fórmula (an + b)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(3n+0) {
background: #767fea;
padding: 10px;
color: #ffffff;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>
</body>
</html>Práctica
¿Cuál es la función de la pseudo clase CSS :nth-last-of-type()?