“Você já viu alguns pais ignorando seu filho enquanto o resto está brincando porque essa criança é a mais velha ou algo assim? Isso geralmente acontece com o filho mais velho porque os pais pensam que ele/ela pode não precisar de tanta atenção. Se você fez, então o conceito de não primeiro tipo não será difícil para você entender. O seletor de primeiro tipo CSS foi usado para simplesmente ignorar o primeiro filho de um pai específico e selecionar o restante dos elementos filhos desse pai em particular. Em outras palavras, ele tem que escolher todos os itens que não são o primeiro descendente do elemento pai. No formato do primeiro filho) componente, ele é mostrado como um parâmetro. Neste artigo hoje, aprenderemos a usar a propriedade infantil não primeiro do CSS.”

Exemplo 01

Vamos começar com o primeiro exemplo deste artigo, criando um formato de arquivo HTML padrão usando tags. Iniciamos este script HTML com a tag html que foi seguida pela etiqueta da cabeça. A etiqueta principal definiu o cabeçalho da nossa página da web html. Então, estamos usando a tag de título para adicionar o nome para esta página. Após o fechamento de uma etiqueta de título, usamos a etiqueta do título na etiqueta da cabeça. Vamos dar uma olhada na etiqueta da cabeça após a discussão no corpo desta página HTML.

Dentro da etiqueta corporal, estamos iniciando -a com o título simples do tamanho 1. Junto com isso, estamos usando o "DL" para criar uma lista de descrição. Nesta lista de descrição, um total de 2 especificações de descrição foi usado de acordo com as tags "dt" que abrem e fechando na linha 13 e 17. A descrição da definição "DD" tags são usadas para representar os itens de uma lista de descrição, i.e., nas linhas 14, 15, 16, 18 e 19. A lista de descrição foi fechada após adicionar os itens de descrição. O corpo da nossa página HTML foi concluído. Então, estamos fechando a etiqueta corporal, eu.e., . Agora, vamos dar uma olhada na etiqueta de estilo da nossa etiqueta de cabeça para estilizar o corpo do nosso código HTML. A especificação de descrição “dt” foi estilizada com o peso da fonte do tamanho ousado da fonte em negrito, da família serif e do tamanho da fonte de 25px. As tags de descrição da definição são estilizadas com a margem de 4px e o tamanho da fonte de 22px.

Para as tags "DD", usamos o deslocamento "não" (primeiro do tipo) para estilizar todos os seus filhos, exceto a primeira criança imediata. Adicionamos o tamanho da fonte de 18px e a borda de 3px sólido da cor verde-amarela. Agora, esse estilo seria aplicado apenas ao restante das tags infantis da tag "DD" sem o estilo de seu primeiro filho ou membro. Isso é sobre a tag de estilo e esta página HTML. Então, precisamos salvá -lo e executá -lo com a opção de execução do código do Visual Studio.

Depois de executar esse script HTML no navegador Chrome, recebemos abaixo a saída da lista de descrição. O cabeçalho foi exibido sem nenhum estilo, enquanto a lista de descrição exibia um total de duas especificações de descrições itens da lista principal, i I.e., Animais e animais marinhos. As principais especificações da descrição são maiores que o restante dos itens da lista, conforme especificado pela tag de estilo. Ao mesmo tempo, as descrições de definição "dd" foram denominadas de maneira diferente.

O item adjacente ao número 1 é um pouco maior que o restante dos itens. Junto com isso, todos os itens obtiveram uma borda colorida verde-amarela ao seu redor, mas o primeiro item ficou inalterado porque é o primeiro filho e deve ser evitado de acordo com o compensado CSS não do primeiro tipo usado no estilo marcação.

Exemplo 02

Vamos começar com outro exemplo de CSS, não um seletor de deslocamento de primeiro do tipo, juntamente com outros seletores para fazer uma comparação. Então, iniciamos este código HTML com o formato HTML padrão de tags, i i.e., Começando de uma tag html simples, seguida pela etiqueta de cabeça e corpo. Vamos dar uma olhada na parte do corpo principal deste script html através da etiqueta corporal, eu.e., . Começa com o uso da tag de título

do maior tamanho e fecha

com algum texto em ambas as tags.

Depois disso, ele contém uma seção "div" para criar um novo contêiner dentro da área do corpo HTML com a classe "pai" especificada para ser usada para modelar. Este contêiner div teria alguns parágrafos e títulos dentro dele. O título deste recipiente seria do tamanho 1, começando com

e terminando com

. Depois disso, ele contém um total de 4 parágrafos dentro dele com o uso do início

etiqueta e final

marcação. Depois que todos os parágrafos são concluídos e fechados, estamos usando a tag para fechar o contêiner para obter mais inserção de elementos aqui. O corpo desta tag html foi concluído aqui, pois está usando a tag para fechar a parte do corpo. Vamos dar uma olhada no cabeçalho desta página HTML, adicionando o título a esta página com a ajuda de uma tag "Title" na etiqueta principal "Head" de HTML. Depois disso, estamos utilizando a etiqueta "estilo" do HTML CSS para adicionar algum estilo ao corpo da nossa página HTML. Então, ele foi iniciado com a classe “pai” e o seletor “primeiro filho” para adicionar estilo ao primeiro filho do elemento em particular “div” que foi especificado com a classe “pai”.

Agora, o cabeçalho deste recipiente "div" seria colorido azul com o estilo de fonte oblíquo e a família de fontes de cursiva. Usamos a tag de parágrafo “P” com o primeiro seletor do tipo para adicionar estilo ao primeiro parágrafo do restante dos parágrafos. Conteria um fundo de amêndoas empurradas e um tamanho de fonte de 2.25em. Agora, a mesma classe pai é usada com o seletor "Não (:: primeiro do tipo)" para estilizar todo o mesmo tipo de elementos filhos, eu.e., "P", exceto o primeiro filho do recipiente "div". Todos esses elementos seriam verde marinho com tamanhos maiores de fontes e famílias de fontes diferentes.

Além disso, o seletor de último filho foi usado para estilizar o último filho da seção "Div", que também é um parágrafo. Será colorido laranja com um estilo de fonte normal e uma família de fontes diferente. O estilo foi concluído aqui. Agora, estaremos executando para ver as mudanças.

A saída não está mostrando nenhum estilo para o 1º título, o primeiro título de cor azul com estilo oblíquo do recipiente "div", o primeiro parágrafo seria estilizado com o fundo rosa claro, os próximos dois parágrafos são coloridos com a cor verde -marinha, e o último parágrafo é laranja colorida.

Conclusão

Este artigo contém uma breve explicação do seletor CSS, não do primeiro do tipo. Para isso, discutimos seu uso e aplicação nos elementos CSS no parágrafo introdutório. Depois disso, implementamos isso em alguns exemplos de script html para mostrar seu trabalho. Junto com isso, também cobrimos sua comparação com alguns seletores de irmãos para tornar seu trabalho mais claro e proeminente.