CSS TILDE

No CSS, o tilde é um símbolo de linha do Wase que é representado como "~". Também é chamado de "combinador subsequente-irmãos". Usamos este TILDE ou combinador subsequente de irmãos para separar dois seletores de compostos. Em outras palavras, podemos dizer que o seletor de tilde escolhe todos os irmãos de todos os elementos do elemento especificado. Neste tutorial, discutiremos o funcionamento do seletor de Tilde. Usaremos este seletor de tilde em nossos códigos e demonstraremos como funciona.

Exemplo 1:

Para usar este seletor de tilde no CSS, devemos criar um arquivo HTML primeiro e vincular esse arquivo ao nosso arquivo CSS no qual usaremos o seletor Tilde. Neste exemplo, estamos criando uma div e nesta div, temos um título e dois parágrafos e uma etiqueta "RH" entre esses dois parágrafos. Esta tag "RH" é usada para representar uma quebra temática entre os parágrafos. Agora, após a conclusão deste código HTML, vamos mudar para o arquivo CSS, no qual utilizamos esse seletor de Tilde.

Abaixo está o nosso código CSS, no qual estilizamos o título alterando sua “cor” para “verde” e alinhá-lo no “centro”, utilizando a propriedade “Text-Align”. Também mudamos sua “família de fontes” e o colocamos como “argelino”. Depois de denominar o título, estamos usando o seletor de tilde. O primeiro elemento é o "RH" e o segundo é "P". Estamos usando este seletor de tilde para selecionar todos os parágrafos que são precedidos pelo "RH" e depois aplicando algumas propriedades de estilo a esses parágrafos. Alinhamos o texto para "justificar" e definir a cor do plano de fundo usando a propriedade "cor de fundo" e usamos o "pó azul" para isso. A propriedade "tamanho da fonte" também é utilizada e fornece o valor de "120%" a esta propriedade. Então, "argeliano" é selecionado como a "família da fonte". Todas essas propriedades serão aplicadas aos parágrafos que são precedidos pelo "HR".

Observe a saída abaixo, todas as propriedades que usamos acima no arquivo CSS são aplicadas apenas ao parágrafo que é precedido pelo "HR". O parágrafo acima permanece inalterado, mas o segundo parágrafo após o "RH" é alterado e todo o estilo é aplicado a este parágrafo. Isso é apenas por causa do seletor de tilde.

Exemplo # 2:

Aqui, colocamos um div. Nesta div, colocamos dois parágrafos e um título. Depois disso, colocamos outra div neste primeiro div e colocamos um parágrafo e fechamos esta segunda div. Fora da segunda div, estamos colocando outro parágrafo e direção. Em seguida, fechando o primeiro div aqui. Depois de fechar o primeiro div, coloque novamente dois parágrafos. E depois feche a etiqueta corporal.

Aqui, colocamos o seletor de Tilde e colocamos "P" como o primeiro elemento e também "P" como o segundo elemento e depois escrevemos como "P ~ p". Isso significa que o primeiro "P" é precedido pelo segundo "P". Ele selecionará todos os "P" que são seguidos pelo primeiro "P". Todo o segundo "P" que é seguido pelo primeiro "P" é estilizado de acordo. Usamos a propriedade "cor" que define a cor da fonte do parágrafo e definimos como "preto". O tamanho da fonte que estamos definindo aqui é "20px". Estamos utilizando a palavra-chave "ousada" como o valor de "peso da fonte". E selecionar o "calibri" "font-family" para isso. A "cor de fundo" aparecerá em "Light Coral" porque estamos selecionando essa cor aqui como a "cor de fundo".

Você pode observar na saída abaixo que todos os segundos parágrafos que são seguidos pelo primeiro parágrafo são estilizados, pois usamos o seletor de tilde para isso. Ao utilizar o seletor de tilde, selecionamos todos os segundos parágrafos que precedem o primeiro parágrafo.

Exemplo # 3:

Neste código, temos uma div e depois uma lista não ordenada fora da div. Depois de fechar esta lista, escrevemos um parágrafo usando tags “P” e depois criamos uma segunda lista abaixo deste parágrafo. Quando esta segunda lista termina, escrevemos um título usando tags "H2". Após esse título, temos outra lista. Todas as listas são listas não ordenadas aqui.

Estamos usando "P" e depois o seletor de Tilde. Após o seletor de Tilde, temos "UL", o que significa que ele seleciona todo o "UL" que é precedido pelo "P". Usamos algumas propriedades de estilo para dar estilo ao "UL" para deixar a diferença clara para você como esse tilde seleciona elementos e aplica o estilo fornecido aos elementos selecionados. Primeiro usamos a propriedade "cor" e definimos "verde" para a cor do texto. Então, os elementos selecionados renderizarão em uma cor "verde". Também estamos aumentando o “tamanho da fonte” para “22px” e definindo a “família da fonte” para “argelino”. Definimos a “cor de fundo” em forma de RGB e a configuramos como “RGB (235, 235, 125)”, que se parece com a cor amarela.

Aqui, a saída mostra que a primeira lista é simples e não há alteração na primeira listagem, não é selecionada como está presente antes do parágrafo e não é precedida pelo "P". As outras duas listas são estilizadas, pois as duas listas são precedidas pelo "P". Essas duas listas estão presentes após o parágrafo, então elas são selecionadas e depois estilizadas.

Exemplo # 4:

Você pode ver aqui nós criamos uma div e um título dentro disso. Então dois parágrafos fora desta div. Abaixo disso, temos mais uma div e seguindo o mesmo que acima e criamos dois parágrafos.

Usamos o "div" como o primeiro seletor e depois tilde e depois "p" como o segundo seletor. Levará todos os parágrafos que são seguidos pela div. O "fundo" que definimos aqui é "RGB (111, 212, 111)", que é uma cor verde claro. Utilizamos "azul" como a "cor" para que o texto apareça "azul". Também o alinhamos ao "centro" da linha. E "Georgia" é a sua "família" como selecionamos aqui. Também "ousado" este texto usando "ousado" como o valor de "peso da fonte". O "tamanho da fonte" é "25px" desta vez e também é "itálico" em "estilo de fonte".

Todos os parágrafos são selecionados na saída porque todos os parágrafos são precedidos pela div . Então, ele seleciona todos os parágrafos e podemos ver que todas as propriedades que utilizamos são aplicadas a esses parágrafos. O seletor de tilde ajuda a selecionar todos os parágrafos que são seguidos pela div e aplicando propriedades dentro dos aparelhos encaracolados deste.

Conclusão:

Apresentamos este tutorial para aprender o seletor de Tilde no CSS. Aqui, discutimos o que é o seletor de tilde e como usar esse seletor de tilde no CSS e como ele funciona. Colocamos o primeiro seletor e depois o seletor de Tilde e depois o segundo seletor. Como explicamos, ele seleciona o segundo seletor que é seguido pelo primeiro seletor com a ajuda do seletor Tilde. Demonstramos vários exemplos aqui neste tutorial.