identificando a primeira instância de um tipo de elemento específico em um documento inteiro

pergunta:

Como se pode utilizar CSSs ou javascript para atingir e estilizar a ocorrência inicial de um tipo de elemento específico em todo o documento HTML, independentemente de sua colocação na estrutura do documento? Solução baseada em CSS

baseada em CSS, infelizmente, o CSS sozinho não fornece funcionalidade para corresponder à primeira ocorrência de um tipo de elemento em todo o documento. O: Pseudo-classe do primeiro do tipo, conforme as especificações do CSS, se aplica apenas ao primeiro irmão de seu tipo dentro de seu elemento pai. &&&] 1. : Emulação do primeiro do tipo

usando o JavaScript, podemos alcançar essa funcionalidade introduzindo uma classe personalizada, "primeiro do tipo" e utilizando o método QuerySelector () para recuperar a primeira correspondência elemento do tipo desejado. Em seguida, atribuímos esta classe personalizada ao elemento recuperado:

document.QuerySelector ('P'). ClassName = 'First-Of-Type';

2. Função de correspondência personalizada

também podemos desenvolver uma função JavaScript personalizada para identificar e estilizar a primeira ocorrência de um tipo de elemento específico:

função nthIndexOftype (elemento, index) { Var irmãos = element.parenteLement.Children; var count = 1; for (var i = 0; i

Esta função aceita dois parâmetros: o elemento que queremos pesquisar e o índice da ocorrência alvo. Ele itera através de todos os elementos irmãos e retorna o primeiro elemento do tipo especificado, aplicando o estilo desejado.