No CSS, existem várias propriedades utilizadas onde algumas propriedades são universais e algumas são usadas em vários seletores. No entanto, se os usuários desejam estilizar os elementos com base em sua posição em um grupo, como posição par ou ímpar, CSS “: nth-child ()”É utilizado seletor que define se o elemento é par ou estranho.

Este post explicará o método para modelar os elementos pares e ímpares no CSS.

Como estilizar elementos pares e estranhos?

A sintaxe para modelar os elementos pares ou ímpares é mencionada abaixo:

Li: Nth-Child (ímpar/par)
Propriedade CSS

Agora, tente o procedimento fornecido para estilizar os elementos pares e ímpares em um contêiner "div".

Etapa 1: Insira o cabeçalho

Adicione um título com a ajuda do “

”Tag e insira o texto entre a tag de título. O "

”Define o título de nível um.

Etapa 2: Crie um elemento "div"

Criar uma "div“Contêiner com a ajuda do“”Elemento e atribui um“aula”Atributo com um nome específico.

Etapa 3: Adicionar lista

Adicionar "

”Tag para listar o item:

Linuxhint Content Creators

Discórdia

HTML/CSS

JavaScript

Git

Docker

janelas

Saída

Etapa 4: Lista de estilo

Agora, acesse o “div”Elemento usando a classe atribuída“.Lista de estilo”E aplique as propriedades abaixo da listada:

.Lista de estilo
borda: 5px RGB sólido (17, 241, 241);
margem: 50px;
preenchimento: 20px;

Aqui:

• ““fronteira”Define um limite ou esboço para um elemento.
• ““margem”Aloca um espaço ao redor do limite definido do elemento.
• ““preenchimento”Especifica o espaço dentro da fronteira:

Etapa 5: estilo elementos ímpares

Para estilizar os elementos ímpares do contêiner, primeiro, acessar os elementos antigos, utilizando o “Li: Nth-Child (ímpar)”. O "Nth-Child ()”É um seletor que corresponde a todos os elementos do enésimo filho de seus pais, onde“n”Pode ser um elemento número ou palavra -chave (ímpar ou uniforme). Em seguida, aplique as propriedades abaixo da listada:

Li: Nth-Child (Odd)
Size da fonte: 20px;
Antecedentes: RGB (12, 189, 233);
cor branca;

Aqui o "tamanho da fonte”Especifica o tamanho da fonte,“fundo”Define a cor do fundo e“cor”A propriedade é usada para especificar a cor do texto.

Pode -se observar que os elementos estranhos foram estilizados utilizando as propriedades do CSS:

Etapa 7: estilo até elementos

Para estilizar os elementos uniformes, acesse os elementos uniformes utilizando o “Li: Nth-Child (par)”. Em seguida, aplique as propriedades do CSS de acordo com sua preferência. Por exemplo, o “tamanho da fonte","fundo", e "cor" são usados:

Li: Nth-Child (par)
Size da fonte: 20px;
Antecedentes: RGB (167, 235, 10);
Cor: RGB (238, 15, 15);

Saída

Além disso, o usuário pode aplicar CSS em elementos pares e ímpares para estilizá -los:

Nós ensinamos a você como estilizar elementos ímpares.

Conclusão

Para estilizar os elementos pares e estranhos, crie um “”E adicione elementos na forma de uma lista usando o“

" marcação. Em seguida, acesse os elementos pares ou ímpares, utilizando o “Li: Nth-Child ()"E onde"Nth-Child ()”O seletor compara cada elemento de um NTH-filho com seus pais. O "n”Pode ser uma palavra -chave ou número, seja par ou estranho. Em seguida, aplique propriedades CSS como “tamanho da fonte","cor", e "fundo”Para estilo. Este post demonstrou o método mais fácil para modelar os elementos pares ou ímpares.