Não consegui entender o :nth-child, professor usou mas não explicou muito bem, nem pelo texto ao fim do capítulo.
Solucionado
Não consegui entender o :nth-child, professor usou mas não explicou muito bem, nem pelo texto ao fim do capítulo.
Olá, Rodrigo!
O seletor ":nth-child" é utilizado para selecionar um elemento específico com base na sua posição em relação aos seus irmãos dentro de um elemento pai. Ele recebe um argumento que pode ser um número, uma fórmula matemática ou até mesmo a palavra-chave "odd" ou "even".
Por exemplo, se você tem uma lista de elementos e deseja selecionar apenas o terceiro elemento, você pode utilizar o seletor :nth-child(3). Se quiser selecionar todos os elementos ímpares, pode utilizar :nth-child(odd). Já se quiser selecionar todos os elementos pares, pode utilizar :nth-child(even).
Vale ressaltar que o índice dos elementos começa em 1, ou seja, o primeiro elemento é ":nth-child(1)", o segundo é ":nth-child(2)" e assim por diante.
Espero ter ajudado.
Bons estudos!
Para ajudar na compreensão
| Seletor | Exemplo | Seleciona |
|---|---|---|
| :active | a:active | o link ativo |
| :checked | input:checked | todos os elementos <input> marcados |
| :disabled | input:disabled | todos os elementos <input> desabilitados |
| :empty | p:empty | todos os elementos <p> que não possuem filhos |
| :enabled | input:enabled | todos os elementos <input> habilitados |
| :first-child | p:first-child | todos os elementos <p> que são o primeiro filho de seu pai |
| :first-of-type | p:first-of-type | todos os elementos <p> que são o primeiro elemento <p> de seu pai |
| :focus | input:focus | o elemento <input> que está em foco |
| :hover | a:hover | os links quando o mouse está sobre eles |
| :in-range | input:in-range | os elementos <input> com um valor dentro de um intervalo especificado |
| :invalid | input:invalid | todos os elementos <input> com um valor inválido |
| :lang(language) | p:lang(it) | todos os elementos <p> com um atributo lang começando com "it" |
| :last-child | p:last-child | todos os elementos <p> que são o último filho de seu pai |
| :last-of-type | p:last-of-type | todos os elementos <p> que são o último elemento <p> de seu pai |
| :link | a:link | todos os links não visitados |
| :not(selector) | :not(p) | todos os elementos que não são elementos <p> |
| :nth-child(n) | p:nth-child(2) | todos os elementos <p> que são o segundo filho de seu pai |
| :nth-last-child(n) | p:nth-last-child(2) | todos os elementos <p> que são o segundo filho de seu pai, contando a partir do último filho |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | todos os elementos <p> que são o segundo elemento <p> de seu pai, contando a partir do último filho |
| :nth-of-type(n) | p:nth-of-type(2) | todos os elementos <p> que são o segundo elemento <p> de seu pai |
| :only-of-type | p:only-of-type | todos os elementos <p> que são o único elemento <p> de seu pai |
| :only-child | p:only-child | todos os elementos <p> que são o único filho de seu pai |
| :optional | input:optional | os elementos <input> que não possuem o atributo "required" |
| :out-of-range | input:out-of-range | os elementos <input> com um valor fora de um intervalo especificado |
| :read-only | input:read-only | os elementos <input> com o atributo "readonly" especificado |
| :read-write | input:read-write | os elementos <input> que não possuem o atributo "readonly" |
| :required | input:required | os elementos <input> com o atributo "required" especificado |
| :root | root | o elemento raiz do documento |
| :target | #news:target | o elemento #news ativo (quando clicado em um URL contendo esse nome de âncora) |
| :valid | input:valid | todos os elementos <input> com um valor válido |
| :visited | a:visited | todos os links visitados |
Obrigado, pessoal!