Como usar um seletor em CSS ou JavaScript?

Em CSS, os seletores indicam a que elementos HTML aplicar estilos. Em JavaScript, eles são usados para selecionar elementos do DOM.

Principais tipos de seletores CSS:

• Seletor de tipo: Seleciona todos os elementos de um tipo especificado.

  div {
    /* estilos para todos os <div> */
  }
  

• Seletor de classe: Seleciona elementos com uma classe específica.

  .minha-classe {
    /* estilos para elementos com a classe "minha-classe" */
  }
  

• Seletor de ID: Seleciona o elemento com um ID específico (deve ser único).

  #meu-id {
    /* estilos para o elemento com ID "meu-id" */
  }
  

• Seletor universal: Seleciona todos os elementos.

  * {
    /* estilos para todos os elementos */
  }
  

• Combinadores: Combinam seletores.
  • Descendente ( ): div p - seleciona todos os <p> dentro de <div>.
  • Filho direto (>): div > p - seleciona todos os <p> que são filhos diretos de <div>.
  • Irmão adjacente (+): h2 + p - seleciona o primeiro <p> que segue imediatamente <h2>.
  • Irmão geral (~): h2 ~ p - seleciona todos os <p> que seguem <h2>.

Em JavaScript, para selecionar elementos do DOM, usam-se os métodos querySelector e querySelectorAll.

• querySelector: Retorna o primeiro elemento que corresponde ao seletor CSS especificado.

  // Seleciona o primeiro elemento com a classe "minha-classe"
  const elemento = document.querySelector('.minha-classe');
  

• querySelectorAll: Retorna uma NodeList (semelhante a um array) de todos os elementos que correspondem ao seletor CSS.

  // Seleciona todos os elementos `<div>`
  const elementos = document.querySelectorAll('div');
  

Exemplo de uso em JavaScript:

// Encontrar um botão por ID
const meuBotao = document.querySelector('#meu-botao');

// Adicionar um manipulador de evento de clique
if (meuBotao) {
  meuBotao.addEventListener('click', () => {
    alert('Botão pressionado!');
  });
}

// Encontrar todos os elementos de lista com a classe "lista-item"
const itensLista = document.querySelectorAll('.lista-item');

// Alterar o texto de cada elemento da lista
itensLista.forEach(item => {
  item.textContent = 'Texto atualizado';
});

A relação entre os seletores CSS e seu uso em JavaScript com querySelector/querySelectorAll é direta. Você pode usar os mesmos seletores CSS que nos estilos para selecionar elementos em JavaScript.