CSS apenas-filho
Exemplo 01:
Iniciamos o arquivo de código HTML dentro do código do Visual Studio com a etiqueta de abertura principal HTML seguida pela abertura de uma etiqueta de cabeça adjacente à abertura da tag de título. Esta tag de título contém o título para esta página e a tag de título está fechada aqui. Em seguida, temos uma etiqueta de estilo CSS principal e a tag corporal para adicionar elementos à página HTML junto com algum estilo. Precisamos compreender o corpo do HTML primeiro. Para isso, usamos um título simples do maior tamanho no topo da página HTML, eu.e. H1, mostrando que este é um exemplo de deslocamento de classe apenas para crianças. Em seguida, usamos o simples elemento "div" para criar uma nova divisão na página da web html seguida por sua criança, eu.e. rótulo. Esta tag de etiqueta usa uma frase simples nela.
Agora, o elemento "etiqueta" é a única tag dentro da tag "Div". Seria tomado como um único deslocamento de filho neste caso. Temos outro elemento div usado depois disso na página HTML. Este elemento div contém mais duas tags ou elementos dentro dele. Sua primeira tag é a tag span e a outra é a tag de etiqueta; Ambos contêm alguns dados de texto nele. Como essa tag div tem dois filhos, nem um único filho seria considerado como um deslocamento "apenas filho" para estilo. Por fim, temos uma nova etiqueta de parágrafo com sua única tag-filho "Label" dentro dela. Agora, essa etiqueta do elemento de parágrafo também seria considerada a única criança de seus pais e estilizada de acordo. O elemento corporal é concluído aqui.
Vamos tomar um disfarce de design desta página HTML. Dentro da tag CSS de estilo, usamos o elemento "etiqueta" com a classe Offset "Somente Child" para aplicar alguns estilos a todos os elementos infantis de tags/elementos específicos que não contêm nenhuma outra criança dentro deles. Em outras palavras, o estilo é aplicado aos elementos infantis que não têm irmãos. Usamos o fundo da propriedade para adicionar o fundo de cor verde para esta criança em particular. A propriedade da família de fontes contém mais de 1 valor para o texto contido pela criança em particular e seu tamanho de fonte é extra grande. A cor para o texto de tags infantis de “etiqueta” é rosa claro, de acordo com a cor da propriedade. A etiqueta de estilo ao lado do elemento de etiqueta da cabeça está concluída. Vamos fechar a tag html após a etiqueta do corpo e salvar este código. Tente executá-lo com o navegador Chrome para ver a saída para o deslocamento da classe única de crianças.
A saída a seguir exibida mostra um título simples na parte superior, seguido pelas duas seções claras “div” e um parágrafo. As seções exibidas no fundo de cor verde demonstram a única criança da seção "Div", de acordo com o único deslocamento do filho para o elemento de etiqueta. A linha após o primeiro elemento filho representa a segunda seção "div" com dois filhos, span e etiqueta, na mesma linha. Enquanto o segundo filho estilizado no fundo verde faz parte de um elemento de parágrafo.
Exemplo 02:
Iniciamos este script html com o mesmo formato HTML de códigos - inicie com a tag html seguida pela etiqueta da cabeça, etiqueta corporal, abertura e fechamento. O corpo do HTML contém um título de tamanho 1, o maior título do HTML. Iniciamos uma lista ordenada em nossa tag corporal html. Este elemento da lista é adicionado com a tag "OL". Esta lista ordenada contém um total de 4 itens de lista numerados nela através do uso de tags da lista "Li". A primeira lista numerada contém uma única lista não ordenada nela com um único item de lista que é considerado como sua única criança. O segundo item da lista da lista ordenada principal contém outra lista não ordenada dentro dela. Esta lista não ordenada interna contém três itens de lista nela com o uso das tags "Li". O terceiro item da lista da lista ordenada principal contém um único item de lista nele com a tag de lista não ordenada, seguida pela tag "Li".
O último item da lista da lista ordenada principal contém outro item de lista não ordenada, "UL". Este item de lista não ordenado contém um total de três itens de lista nele usando as tags "li". O pedido principal é fechado após o uso de todos os 4 itens principais da lista. O corpo da nossa página HTML é concluído aqui.
Vamos dar uma olhada no design de toda essa página HTML. Usamos as duas tags de palavras -chave "LI" na tag de estilo para estilizar todos os itens da lista interna dos 4 itens principais da lista. A propriedade do tipo no estilo de lista para os itens da lista interna é especificada como um estilo "círculo". Por outro lado, usamos a única aula de deslocamento de crianças para os itens da lista para adicionar alguns estilos aos únicos itens da lista que são o único filho de seus respectivos pais e não têm outra criança ou irmão. Especificamos a cor do texto para os itens da lista de crianças como vermelho com diferentes usos da família de fontes. Além disso, usamos o tipo de estilo da lista quadrada através do uso do “tipo de lista”. O estilo para este código é finalizado. Vamos salvar e executar nosso código para ver a saída.
A saída para este código mostra um único título seguido pela lista ordenada de 4 itens de lista numerados. Os itens de lista não ordenados desses itens de lista ordenados são destacados na cor do texto vermelho com a bala de estilo da lista quadrada. O restante dos itens de lista não ordenados são exibidos no estilo da bala circular.
Conclusão
Este artigo definiu a marca para demonstrar o uso da classe Only-Child Offset no estilo CSS para estilizar os únicos elementos de uma página HTML que são um único filho do elemento pai. Para esse fim, utilizamos um total de 2 breves exemplos em nosso script html para demonstrar a aplicação dessa classe de deslocamento a esses elementos infantis. O primeiro exemplo contém o uso desse deslocamento em algumas seções "div", enquanto o outro exemplo o usa para estilizar os itens de lista não ordenados para uma lista numerada.