Manual de referencia CSS

Reglas CSS @

大全 de propiedades CSS

Funciones CSS (Functions)Manual completo de selectores CSS

CSS3 :nth-último-selector child()

:nth-último-child() Este pseudo-clase CSS coincide con elementos en ciertas posiciones de los hermanos desde el final hacia adelante. Nota: Este pseudo-clase y :nth-child es básicamente idéntico, pero es desde el final en lugar de desde el principio.

Manual de referencias de selectores CSS completos

ejemplo en línea

especificar el color de fondo y el efecto de fuente del tr del table:

Ejemplo

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Manual básico (oldtoolbag.com)</title>　
<style>　
table {
　　borde:　1px sólido azul;
}
/*　seleccionar los tres últimos elementos　*/
tr:nth-último-child(-n+3) {
　　fondo-color: rosa;
}
/*　seleccionar cada elemento desde el segundo hasta el último　*/
tr:nth-último-child(n+2) {
　　color: azul;
}
/*　solo seleccionar el segundo último elemento　*/
tr:nth-último-child(2) {
　　fuente-peso:　600;
}
</style>
</head>
<body>
<table>
　　<tbody>
　　　　<tr>
　　　　　　<td>la primera fila</td>
　　　　</tr>
　　　　<tr>
　　　　　　　<td>la segunda fila</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>la tercera fila</td>
　　　　　</tr>
　　　　　<tr>
　　　　　　　　<td>la cuarta fila</td>
　　　　　</tr>
　　　　　<tr>
　　　　　　　　<td>la quinta fila</td>
　　　　</tr>
　　</tbody>
</table>
</body>
</html>

Prueba y observa ‹/›

definición y uso

:nth-último-El selector child(n) coincide con cada elemento que es el N ° hijo de su elemento, sin importar el tipo del elemento, contando desde el último hijo.

npuede ser un número, un nombre propio o una fórmula.

indicaciones: ver:nth-último-of-type() selector. Este selector coincide con el elemento estructural subyacente más reciente del elemento padre.

ejemplo de selector

tr:nth-último-child(odd) or tr:nth-último-child(2n+1)
　　　 representa las filas impares del HTML de la tabla inversa:1、3、5elementos.

tr:nth-último-child(even) or tr:nth-último-child(2n)
　　　 representa las filas pares del HTML de la tabla inversa:2、4、6elementos.

:nth-último-child(7)
　　　 representa el elemento7último.

:nth-último-child(5n)
　　　 representa el elemento5、10、15elementos.

:nth-último-child(3n+4)
　　　 representa el elemento4、7、10、13elementos.

:nth-último-child(-n+3)
　　　 representa los tres últimos elementos de un grupo de hermanos.

p:nth-último-child(n) or p:nth-último-child(n+1)
　　　 representan cada elemento <p> de un grupo de hermanos. Esto es equivalente a un selector p simple (debido a que n comienza en 0, y el último elemento en 1).1Comienzo, n y n+1elegirán el mismo elemento.).

p:nth-último-child(1) o p:nth-último-child(0n+1)
　　　 Representa todos los elementos <p> que están en la última posición entre los hermanos. Esto es equivalente a :last-El selector child() es idéntico.

Compatibilidad del navegador

Los números en la tabla representan la versión del primer navegador que admite el atributo.

selector
:nth-último-child()	4.0	9.0	3.5	3.2	9.6

Ejemplo 1

El par e impar pueden ser usados como palabras clave para coincidir con los elementos hijos, cuyos índices son pares o impares.

Aquí, para los elementos p de índice inverso par e impar, especificamos dos colores de fondo diferentes:

Ejemplo

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Manual básico (oldtoolbag.com)</title>　
<style>　
p:nth-último-child(odd)
{
　　　　background:#ff0000;
}
p:nth-último-child(even)
{
　　　　background:#0000ff;
}
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p><b>Nota:</b> Internet Explorer　8　Los navegadores de versiones anteriores no admiten :nth-último-selector child().</p>
</body>
</html>

Prueba y observa ‹/›

Ejemplo 2

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í, para todos los índices3Los elementos p del múltiplo inverso especificados aquí tienen el color de fondo:

Ejemplo

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Manual básico (oldtoolbag.com)</title>　
<style>　
p:nth-último-child(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　Los navegadores de versiones anteriores no admiten :nth-último-selector child().</p>
</body>
</html>

Prueba y observa ‹/›

Manual de referencias de selectores CSS completos

Funciones CSS (Functions)Manual completo de selectores CSS