O nth-child é um poderoso seletor do CSS 3. Com a sua utilização é possível selecionar o 5 elemento “li” de uma lista sem precisar definir uma classe ou id especifico para ele.
Veja o exemplo, no qual estou selecionando o quinto elemento com li:nth child(5)
CSS 3
.test li:nth-child(5){font-weight:bold}
<ul class="test"> <li>LI 1</li> <li>LI 2</li> <li>LI 3</li> <li>LI 4</li> <li>LI 5</li> </ul>
Agora para selecionar apenas os 5 primeiros elementos, utilizamos:
li:nth-child(-n+5) { font-weight:700;color:red; }
Pular os 5 primeiros items e selecionar todos acima:
li:nth-child(n+6) { font-weight:700;color:red; }
Selecionando os Pares ou Impares (odd ou even):
li:nth-child(odd) { font-weight:bold }
Exemplo do odd e even
Selecionando apenas o ultimo elemento:
li:last-child { color: orange; }
Selecionando o segundo elementos depois do último:
li:nth-last-child(2) { color: gray; font-weight:700 }
O :nth child(n) irá selecionar todos os elementos filhos conforme a sua ordem númerica, independente do tipo.
n pode ser um número, palavra chave ou até uma formula.
sintaxe
:nth-child(number) { declarações de css }
:nth-last-child(n): último elemento
:nth-last-of-type(n): último elemento, com o filtro por tipo
Restringe a regra de seleção a apenas um tipo de elemento.
Para selecionar apenas os elementos “p”: p:nth-of-type(2) ou apenas os “li”: li:nth-of-type(2)
Gerador de bordas arredondadas no CSS – Border-Radius Online
Tutorial de como fazer o efeito parallax com CSS
Segurança: Atualizações frequentes geralmente incluem patches de segurança para corrigir vulnerabilidades identificadas. Ao manter o Magento atualizado, você reduz significativamente…
Como adicionar uma mensagem de Alerta ou Aviso do Admin do Magento 2 Injete o Magento\Framework\Message\ManagerInterface no construtor da sua…
Para exibir as mensagens adicionadas na classe Magento\Framework\Message\ManagerInterface em um arquivo .phtml, você pode usar o seguinte código: <?php $objectManager…
Para criar um script no Magento 2 que exporte as categorias para um arquivo XML com o nome da categoria,…
Para definir um vídeo MP4 como plano de fundo em um <div> usando HTML e CSS, você pode seguir estas…
Como desativar o "lastname" no Magento 2 e Adobe Commerce Desativando a obrigatoriedade do campo Execute a SQL abaixo diretamente…