English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-último-of-type(an+b) Este pseudo-clase CSS coincide con aquellos que tienen un an+b-1 elementos hermano del mismo tipo, donde n es un valor positivo o cero. Básicamente es como :nth-of-type es igual, solo que comienza a contar desde el final en lugar de desde el principio.
Manual de referencia de selectores CSS completos
Dar a la2elementos span del mismo tipo rellenan el color de fondo:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Guía básica (oldtoolbag.com)</title>
<style>
span:nth-último-of-type(2) {
fondo-color: lime;
}
</style>
</head>
<body>
<div>
<span>Este es un rango.</span>
<span>Este es otro rango.</span>
<em>Enfatizado.</em>
<span>¡Vaya, este rango se volvió borroso! </span>
<strike>Esto fue eliminado.</strike>
<span>Este es el último rango.</span>
</div>
</body>
</html>Prueba aquí ‹/›:nth-último-of-type( <nth> ) donde <nth> = <an-plus-b> | even | odd
:nth-último-of-type(n)Selector que coincide con el elemento hermano último del mismo tipo.
n Puede ser un número, una palabra clave o una fórmula.
Sugerencia:Ver::nth-último-child()Selector. Este selector coincide con el elemento subestructural último en el elemento padre.
Los números en la tabla representan la versión del primer navegador que admite el atributo.
| selector | |||||
|---|---|---|---|---|---|
| :nth-último-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Los números impares y pares pueden ser usados como palabras clave para coincidir con los elementos hijos, cuyos índices son impares o pares.
Aquí, especificamos dos colores de fondo diferentes para los elementos p impares y pares en el orden inverso:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Guía básica (oldtoolbag.com)</title>
<style>
p:nth-último-of-type(odd)
{
background:#ff0000;
}
p:nth-último-of-type(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<div>
<p>Este es el primer párrafo.</p>
<p>Este es el segundo párrafo.</p>
<p>Este es el tercer párrafo.</p>
<p>Este es el cuarto párrafo.</p>
</div>
</body>
</html>Prueba aquí ‹/›Usando la fórmula (an+ b）.Descripción: a representa el tamaño de un ciclo, N es un contador (que comienza en 0), y b es el desplazamiento.
Aquí, especificamos dos colores de fondo diferentes para los elementos p con índices3Los elementos p que son múltiplos de especificados en el orden inverso designan el color de fondo:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Guía básica (oldtoolbag.com)</title>
<style>
p:nth-último-of-type(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>Este es el título</h1>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p><b>Nota:</b> Internet Explorer 8 y los navegadores de versiones anteriores no admiten :nth-último-selector de child().</p>
</body>
</html>Prueba aquí ‹/›