English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-último-child() Este pseudo-classe CSS coincide com elementos de irmãos a partir do final para frente que estão em certas posições. Nota: Este pseudo-classe e :nth-child é basicamente idêntico, mas é contado a partir do final, não do início.
Manual completo de seletores CSS
Especifica a cor de fundo e o efeito de fonte do tr do table:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Guia básico(oldtoolbag.com)</title>
<style>
table {
border: 1px sólido azul;
}
/* Escolhe os três últimos elementos */
tr:nth-último-child(-n+3) {
background-color: pink;
}
/* Escolhe cada elemento a partir do segundo até o último */
tr:nth-último-child(n+2) {
color: blue;
}
/* Escolhe apenas o segundo último elemento */
tr:nth-último-child(2) {
font-weight: 600;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Primeira linha</td>
</tr>
<tr>
<td>Segunda linha</td>
</tr>
<tr>
<td>Terceira linha</td>
</tr>
<tr>
<td>Quarta linha</td>
</tr>
<tr>
<td>Quinta linha</td>
</tr>
</tbody>
</table>
</body>
</html>Teste e veja ‹/›:nth-último-O seletor child(n) coincide com cada elemento que é o N-ésimo filho do seu elemento, independentemente do tipo do elemento, contando a partir do último filho.
npode ser um número, uma palavra-chave ou uma fórmula.
Avisos: Veja:nth-último-de-type() O seletor escolhe o elemento estrutural subordinado ao pai na posição última do n-ésimo.
tr:nth-último-child(odd) or tr:nth-último-child(2n+1)
representa as linhas ímpares do HTML da tabela:1、3、5elementos.
tr:nth-último-child(even) or tr:nth-último-child(2n)
representa as linhas pares do HTML da tabela:2、4、6elementos.
:nth-último-child(7)
representa o elemento7último.
:nth-último-child(5n)
representa o elemento5、10、15elementos.
:nth-último-child(3n+4)
representa o elemento4、7、10、13elementos.
:nth-último-child(-n+3)
representa os três elementos últimos de um grupo de irmãos.
p:nth-último-child(n) or p:nth-último-child(n+1)
representam cada elemento <p> em um grupo de irmãos. Isso é equivalente a um seletor p simples. (Devido ao fato de que n começa em 0, o último elemento é1começando, n e n+1também escolherão o mesmo elemento.)
p:nth-último-child(1) ou p:nth-último-child(0n+1)
representa todos os elementos que estão no último lugar entre os irmãos <p> . Isso é equivalente a :last-seletor child() é o mesmo.
Os números na tabela representam a primeira versão do navegador que suporta essa propriedade.
| seletor | |||||
|---|---|---|---|---|---|
| :nth-último-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Ímpar e par podem ser usados como palavras-chave para combinar elementos filhos cujos índices são ímpares ou pares.
Aqui, definimos duas cores de fundo diferentes para os elementos p ímpares e pares ao inverso:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Guia básico(oldtoolbag.com)</title>
<style>
p:nth-último-child(odd)
{
background:#ff0000;
}
p:nth-último-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<p>primeiro parágrafo。</p>
<p>segundo parágrafo。</p>
<p>terceiro parágrafo。</p>
<p><b>Atenção:</b> Internet Explorer 8 e navegadores de versões mais antigas não suportam :nth-último-seletor child().</p>
</body>
</html>Teste e veja ‹/›Usando a fórmula (an+ b) Descrição: a representa o tamanho de um loop, N é um contador (começando em 0) e b é o deslocamento.
Aqui, definimos cores de fundo diferentes para os elementos p cujos índices são3Os elementos p cujos índices são múltiplos de um número específico definem a cor de fundo:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Guia básico(oldtoolbag.com)</title>
<style>
p:nth-último-child(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>Este é o título</h1>
<p>primeiro parágrafo。</p>
<p>segundo parágrafo。</p>
<p>terceiro parágrafo。</p>
<p>quarto parágrafo。</p>
<p>quinto parágrafo。</p>
<p>sexto parágrafo。</p>
<p>setimo parágrafo。</p>
<p>oitavo parágrafo。</p>
<p>Nono parágrafo。</p>
<p><b>Atenção:</b> Internet Explorer 8 e navegadores de versões mais antigas não suportam :nth-último-seletor child().</p>
</body>
</html>Teste e veja ‹/›