Usando querySelector em mais de uma tag do mesmo tipo

Oi Eder,

Sim, você pode usar id para diferenciar elementos com a mesma tag. 👍

O querySelector retorna o primeiro elemento que corresponde ao seletor CSS especificado.

Se você tem vários elementos com a mesma tag, o querySelector retornará apenas o primeiro.

Para selecionar elementos específicos, você pode usar seletores mais precisos.

Por exemplo, você pode usar id para selecionar um elemento específico.

<h1 id="titulo-principal">Título Principal</h1>
<h1>Outro Título</h1>
<p id="paragrafo-1">Parágrafo 1</p>
<p>Parágrafo 2</p>

const tituloPrincipal = document.querySelector('#titulo-principal');
const paragrafo1 = document.querySelector('#paragrafo-1');
console.log(tituloPrincipal);
console.log(paragrafo1);

Você também pode usar seletores de classe para selecionar elementos com a mesma classe.

<h1 class="titulo">Título 1</h1>
<h1 class="titulo">Título 2</h1>
<p class="paragrafo">Parágrafo 1</p>
<p class="paragrafo">Parágrafo 2</p>

const titulos = document.querySelectorAll('.titulo');
const paragrafos = document.querySelectorAll('.paragrafo');
console.log(titulos);
console.log(paragrafos);

O querySelectorAll retorna uma lista de todos os elementos que correspondem ao seletor.

Você pode usar id para elementos únicos e classes para grupos de elementos. 🤔

🎓 Para saber mais: Documentação do querySelector e querySelectorAll

Continue praticando e explorando as possibilidades! 💪